I have been asked to convert a site so that it is responsive, without changing the design. I have been fairly successful with phone browser sizes, but am having difficulties with the text on the main navigation menu for tablet sizes (601px to 1001px). The prototype is at http://jaybeeweb.com/restoreWP. Currently I am working only on the top-level menu items.
I tried using the vw unit first of all, and then just several media queries using em units. For both methods, I got good results when resizing my browser, and when I tested it on quirktools.com/screenfly.
On my Samsung Tab3 tablet, however, the font-size doesn’t seem to have been affected and the menu bar is broken. As a matter of fact, in portrait view, I have even lost the background.
How can I solve this problem if I am to keep the dropdown for these sizes? If I can’t fix this, I am willing to go the hamburger route as a last resort.
Only modern devices understand vw units so you need to check if this is supported ion the device you are testing.
Contrary to what you may think the text actually needs to be bigger on mobiles and tablets (because the text appears smaller and harder to read) and therefore simply scaling readable text smaller is a bad idea. It’s ok for large headings but for navigation you probably want the text bigger rather than smaller and a bigger hit area for fat thumbs.
I don’t like the approach you have used in reducing the text size and would look for a better approach. Either use the hamburger as you have done for smaller devices or perhaps redesign the mid-range to fit better.
I would be inclined to keep the text the same size as desktop but shorten the text for the menu items to something like.
Home, About, Get Involved, Resources, Donate, Contact
I would also think about changing ‘get involved’ to a single word title.
The above changes will allow the menu to fit even with same size or larger text (with a bit of tweaking).
You can do this all with css and media queries and wrap the odd words to be removed in a span and just hide those words via media queries on smaller screens as required.
Note that you are using js to show the hamburger which is incorrect because as I close my window the hamburger appears but as I widen the window again there is no menu at all!!
You should show and hide the hamburger with css using a media query at the same time as you hide the menu in the media query. All you need js for is showing/hiding the menu when you click the hamburger.
I also saw you had a script for video resizing tied into the resize event (yet again) and although I didn’t actually check what you were doing with it you can resize videos in css and maintain aspect ratio.
Here’s an article on video resizing that may be of interest.
Hope some of the above gives you food for thought.
I guess at this stage, the hamburger would be easier to implement. Do you suggest, though, that I make the menu width just a percentage of the browser window, instead of having it full width like the phone menu? I think full-width might be too much visually. I have been wracking my brains over the past several days about what alternative there might be to this, and have totally drawn a blank.
One of my constrictions here (I apologize if I forgot to say this before) is that this is a WordPress conversion, so the menu is dynamic and the owner has some control over the sections and the wording. They do, however, listen to my suggestions and I will suggest that they not change it. Also, because the menu is dynamically built, the only way I can get inside it to affect its html is with the WordPress walker class and some pretty heavy duty coding, which I don’t have time for right now.
I noticed the effect that the js had on resizing the navigation menu, but I wasn’t sure how crucial that was for the use of mobile devices. It only happens when resizing on a normal sized computer from phone size to larger sizes. I will replace the js with css.
Thank you for the link to the article. I will take a look at that today for sure.
I don’t want this discussion to stray too far from the menu issue, but It turns out that was one of the articles I read yesterday on my hunt for a solution to the resizing of videos. I don’t think I can get it to work because most of the videos will be embedded as iframes from YouTube into the WordPress pages or custom posts by the site owner who doesn’t code, and it necessitates adding a wrapper container. That’s why I ended up going the JavaScript route. Otherwise, I would much prefer to use just CSS.
Just one more question about the menu bar - my tablet is 1280px by 665px and my laptop is 1366px by 660px. My CSS for large screens is set at min-width of 1001px. Why does the menu bar work fine on my laptop, but breaks on my tablet even though they are very close to the same size?
It should still work as you size the iframe in the same way using the percentage padding trick.
I assume your tablet is 1280px in landscape mode? That’s quote a big tablet unless that’s a double density display.
I’m guessing by ‘break’ you mean the menu no longer fits in the allocated space? If so then its likely that when you switch to landscape the text is resized larger (which happens in ios) as it assumes you wanted to read in more detail.
You can try adding:
body {
-webkit-text-size-adjust: 100%;/* stop ios zooming text on orientation change */
text-size-adjust: 100%
}
It may also simply be that the width of text on your device is greater than on the desktop and therefore not enough room to fit.
It is one of my little bugbears in that people space things out to exactly fit using padding as you have done for your menu.:
#main-navbar li a{
padding: 11px 20px 11px 20px;
}
This means that when space is at a premium there is nowhere for the text to go except to break out somewhere. A line of text can vary as much as by 100px depending on device/platform and font chosen. No two browsers will render text exactly the same width.
If instead of padding you used flexbox or display:table/cell to automatically space items out (without using padding) then menus can collapse much smaller and accommodate differences in text size without breaking.
To see if this is the issue for your page then reduce the horizontal padding on the anchors to see what happens on the tablet. It would be too awkward to change your menu at this stage (most likely) so reducing the padding slightly may be an easy option.
If that’s not the problem you may need to post a screenshot and state which device is having the problem.
Usually all you need to do is open and close your browser window to see where any sticking points occur but understand that you need to leave leeway for the differences in size that browsers will show.
I’m not having any problem with resizing my laptop browser to find the break points. But my tablet is displaying differently from my resized laptop browser and from the online testing tool Screenfly.
Here are the screenshots of both orientations of my tablet right now:
For widths between 601px and 1001px, I changed the padding to ems to make them adjust a bit.
I will do some quick studying and try display: table for my menu to see if that helps. I tried the hamburger for this width, and it didn’t really look great.
That second screenshot with just the Home tab showing is odd and not a display that will normally happen at any width so either something didn’t load properly or there is a bug in that tablet or perhaps you have cache issues. If the layout didn’t fit it would wrap at the right end but the green bar would still be there unlike your screenshot. Is that screenshot from your tablet or from an online service? I find most of the free online browser shots dodgy at the best of times as they don’t seem to wait for the page to load.
On my ipad your layout is ok in both tablet and portrait.
You are however still triggering the hamburger with JS so on a device that meets the hamburger criteria on portrait but not on landscape will get no menu on landscape because you switched it off on the smaller screen! (and vice versa if you started in landscape mode you would not get the hamburger in portrait as the script isn;t linked to a resize event or orientation change event). Just use CSS and media queries as I mentioned before to initiate the change from nav to hamburger. Just use js to reveal and hide the menu from clicking the hamburger. This avoids all the issues with js.
The same thing happens on the desktop when you resize smaller and larger (which I do constantly in order to work on two things at once - like I am doing now). It makes it a pain to debug as it doesn’t snap back to the nav and you have to keep refreshing.
You didn’t say what tablet you are having problems with and what its dimensions are etc.
That should eliminate any wrapping issues due to variance in text and Erik posted the same reply to a similar question here.
I haven’t had a chance yet to change the JS and CSS as you have suggested. But I do intend to do it - just swamped with a shortage of time.
I believe in my opening post, I mentioned that the tablet was a Samsung Tab3. Those screenshots are from that tablet, whose dimensions I stated in my third post.
Today I am going to try fixing the CSS to use display: table and see what that does. If it doesn’t work, I will extend the hamburger icon use to 1001px.
