- This topic has 14 replies, 3 voices, and was last updated 8 years, 6 months ago by Tom.
-
AuthorPosts
-
September 5, 2015 at 7:10 pm #134678James
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!
JamesSeptember 5, 2015 at 11:27 pm #134719TomLead DeveloperLead DeveloperHi 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 π
September 6, 2015 at 4:37 am #134739JamesHey 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:
September 6, 2015 at 9:36 am #134780TomLead DeveloperLead DeveloperAny chance you can link me to the site?
September 11, 2015 at 9:40 am #136063JamesHi 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!
JamesSeptember 11, 2015 at 10:09 am #136066TomLead DeveloperLead DeveloperHmm, 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 π
September 11, 2015 at 11:13 am #136079bdbrownHi 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 Developer768px 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 #136082bdbrownok, thanks.
September 11, 2015 at 11:31 am #136083TomLead DeveloperLead DeveloperNo 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 #136104bdbrownAs 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 420pxShould I add that in the Suggestions forum?
September 11, 2015 at 3:42 pm #136122TomLead DeveloperLead DeveloperThat 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 DeveloperAh, 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 #136300JamesThat looks perfect Tom! Thank you very much for your help. π
September 12, 2015 at 5:38 pm #136363TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.