- This topic has 25 replies, 3 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 20, 2018 at 8:58 pm #556190TomLead DeveloperLead Developer
Let’s remove all of the menu related CSS for now – but be sure to back it up in case we need to re-add it.
Then I would up your menu item height to something like 50px in “Customize > Layout > Primary Navigation”.
April 22, 2018 at 2:22 pm #557453VerónicaHi Leo!
Al menu related CSS is commented now and the menu item height changed!
April 22, 2018 at 9:36 pm #557608TomLead DeveloperLead DeveloperThis CSS is still adding space to the top and to the right of the menu, you may want to remove it:
@media only screen and (max-device-width: 1600px) and (min-device-width: 1200px) {.inside-navigation { margin-top: 50px; margin-bottom: 0px; margin-left: 0px; margin-right: 45px; } }
Then on mobile, you can center the logo like this:
#mobile-header .site-logo { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: auto; margin-left: auto; } #mobile-header .menu-toggle { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
That should get you quite a bit closer to their layout.
April 24, 2018 at 3:43 am #558858VerónicaThanks so much Tom!
I’ve applied your rules and some own ones and now the layout is more likely the one I want to achieve!
Only three things I couldn’t resolve and maybe you can help me! Instead I have selected the navigation logo in both static and sticky menu, when I scroll down, the logo dissapears. I was searching for the rule which is hidding it, but with no luck.
I’d like to use the mobile menu (with toogle and logo) also for tablets. Do you know how to do it?
And the last one… when I open the mobile menu its empty! Why?
Thanks again for all your help!
Kind Regards,
April 24, 2018 at 8:17 pm #559693TomLead DeveloperLead Developer1. Try increasing the height of the menu when it becomes sticky. 20px isn’t tall enough to show the logo.
2. This should do it: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540
3. Is there a menu set to the “Slideout” theme location?: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location
April 25, 2018 at 4:23 am #559917VerónicaThanks so so much Tom! With your help I’ve resolved the first and the third issue! Then only one that it doesn’t work as expected is the second one, where no toggle box is shown. Instead of it, the menu is under the logo now.
April 25, 2018 at 9:58 am #560223TomLead DeveloperLead DeveloperIs the CSS still added? I’m not seeing it. Are you using GP Premium 1.6.2?
April 25, 2018 at 4:16 pm #560523VerónicaYes, it is. https://imgur.com/a/KdWu2jW
I’m using 2.0.2 version
April 25, 2018 at 9:48 pm #560624TomLead DeveloperLead DeveloperCan you try this updated CSS?: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540
April 26, 2018 at 5:01 am #560873VerónicaYes! It works perfectly!!! Thanks so so much!!!
April 26, 2018 at 8:18 am #561074TomLead DeveloperLead DeveloperAwesome, glad I could help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.