Archived topic
Reduce size before responsive mobile menu appears
14 replies · Started by James on September 5, 2015
Hi there,
I'm designing my website using your theme and so far it's going great! Just have one quick question for you at the moment. I'm happy for the Menu to disappear and be replaced with the symbol and drop down on mobile devices, but as I'm only going to have a few nav buttons on the bar I'm looking for a way to keep it as a full menu on tablets.
Is there a way to do this? I've looked at the style css and at the bottom there appears to be some width resolution numbers that match the resolution of an iPad but changing them doesn't seem to make a difference.
Many thanks!
James
Hi James,
Kind of a tricky one!
This CSS should do it: https://gist.github.com/generatepress/bcabe916b1d63330149b
It will make sure the regular menu displays until you hit 767px (mobile devices) - then it will kick in.
Let me know if you need more info :)
Hey Tom,
Thanks very much for that! Nearly worked perfectly. One small problem is that although the menu is now displaying as words rather than the menu drop down (which is great), the menu items are stacked vertically rather than side by side.
Result of the code you kindly provided:
What I'd actually like it to look like if possible:
Any chance you can link me to the site?
Hi Tom,
I'd love to but the site isn't live yet unfortunately. :(
Any ideas? The photos should be showing up above now.
Many thanks!
James
Hmm, the code I provided should take care of that (tested it on my install).
Is the site on a live server? If so, it would be great to get some login credentials to support@generatepress.com so I could see why the code isn't doing what it should be doing.
Let me know :)
Hi Tom. I'm running v1.3.12 and the mobile menu doesn't kick in until 767px which is defined in a media query in mobile.css. If the OP is running the current version shouldn't it keep the full menu on the iPad by default?
768px technically applies to portrait mode tablets as well as mobile.
767px is the "official" size at which screens become mobile.
ok, thanks.
No problem. I figure showing the mobile menu on portrait mode is a good idea - there's not a lot of horizontal space for most navigation items to fit. I wonder how others feel about this.
As a general rule that's probably a safe bet as most sites have several items in the menu and forcing the menu to multiple rows is ugly and screws up the layout. Maybe you could add a user option in Customizer > Layout like "Display desktop menu in mobile view".
No (default) - load the current mobile.css
Yes - load mobile2.css which sets the breakpoint at something like 420px
Should I add that in the Suggestions forum?
That could work - it would require another CSS file to load though, which does slightly affect load times.
Might be a good way to go about it though.
Ah, this was happening because you had your menu centered - I didn't add some specific CSS for that.
I made the change and it looks good now.
Let me know :)
That looks perfect Tom! Thank you very much for your help. :)
You're welcome :)