- This topic has 14 replies, 3 voices, and was last updated 5 years, 1 month ago by Tom.
September 5, 2015 at 7:10 pm #134678James
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.
JamesSeptember 5, 2015 at 11:27 pm #134719TomLead DeveloperLead Developer
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 🙂September 6, 2015 at 4:37 am #134739James
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:
September 6, 2015 at 9:36 am #134780TomLead DeveloperLead DeveloperSeptember 11, 2015 at 9:40 am #136063James
I’d love to but the site isn’t live yet unfortunately. 🙁
Any ideas? The photos should be showing up above now.
JamesSeptember 11, 2015 at 10:09 am #136066TomLead DeveloperLead Developer
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 firstname.lastname@example.org so I could see why the code isn’t doing what it should be doing.
Let me know 🙂September 11, 2015 at 11:13 am #136079bdbrown
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?September 11, 2015 at 11:16 am #136080TomLead DeveloperLead Developer
768px technically applies to portrait mode tablets as well as mobile.
767px is the “official” size at which screens become mobile.September 11, 2015 at 11:27 am #136082bdbrown
ok, thanks.September 11, 2015 at 11:31 am #136083TomLead DeveloperLead Developer
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.September 11, 2015 at 1:36 pm #136104bdbrown
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?September 11, 2015 at 3:42 pm #136122TomLead DeveloperLead Developer
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.September 12, 2015 at 9:42 am #136292TomLead DeveloperLead Developer
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 🙂September 12, 2015 at 10:16 am #136300James
That looks perfect Tom! Thank you very much for your help. 🙂September 12, 2015 at 5:38 pm #136363
- You must be logged in to reply to this topic.