- This topic has 15 replies, 3 voices, and was last updated 3 years, 4 months ago by
Tom.
-
AuthorPosts
-
September 25, 2019 at 9:43 am #1018816
Dmitry
Hi!
Can you help a little?
I use this method https://docs.generatepress.com/article/centering-logo-navigation/
If I do so, primary nav dont disappear for the mobile version. And extra margin appears in sticky nav.
September 25, 2019 at 9:50 am #1018827Leo
StaffCustomer SupportHi there,
That’s weird. Looks like the toggle isn’t kicking in?
I don’t think that’s because of the CSS for centering the logo.
Can you temporarily disable that CSS so I can check?
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 25, 2019 at 10:21 am #1018858Dmitry
Disabled
September 25, 2019 at 10:41 am #1018883Leo
StaffCustomer SupportLooks like the center logo CSS is the issue.
Can you add it back in again?
Thanks π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 25, 2019 at 11:00 am #1018902Dmitry
Done
September 25, 2019 at 11:37 am #1018921Leo
StaffCustomer SupportAre you using any caching plugins or server cache at all?
If so can you turn them off for now?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 25, 2019 at 1:26 pm #1019031Dmitry
Nope
September 25, 2019 at 1:33 pm #1019042Leo
StaffCustomer SupportOk try modifying your CSS to this:
@media (min-width: 769px) { .inside-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-widget { order: 10; overflow: visible; } .nav-float-right .header-widget { top: auto; } .nav-float-right .header-widget .widget { padding-bottom: 0; } .site-branding, .site-logo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 200; } #mobile-header .mobile-bar-items { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin-left: auto; } #site-navigation { float: none; width: 100%; } .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-navigation .menu-item-separator { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .main-navigation .menu-item-separator a { font-size: 0; background: transparent !important; } .slideout-navigation .menu-item-separator, .main-navigation.toggled .menu-item-separator{ display: none !important; } } @media (max-width: 768px) { .inside-header>:not(:last-child):not(.main-navigation) { margin-bottom: 0; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 25, 2019 at 1:40 pm #1019047Dmitry
That works! But there is still some issue in sticky nav:
1. large padding in the separator place.
2. It disappears after reducing window widthSeptember 25, 2019 at 3:14 pm #1019086Leo
StaffCustomer Support1. Not seeing this issue:
https://www.screencast.com/t/fMToRylADAm I missing something here?
2. So you want the logo in the middle and toggle on the right?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 26, 2019 at 5:06 am #1019498Dmitry
I mean the issue is with stick nav, not primary
September 26, 2019 at 4:14 pm #1020059Tom
Lead DeveloperLead Developer1. Try adding this CSS:
.navigation-stick .menu-item-separator { display: none !important; }
2. What disappears exactly? I’m not seeing anything disappear as I reduce the window width.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 2, 2019 at 6:50 am #1024220Dmitry
Great! And the last: how can I manage the gap between menu items? When primary nav becomes more narrow the gaps become not the same.
You can check It on a main page and on a screenshot: https://www.screencast.com/t/P8m1vH8C
October 2, 2019 at 6:59 pm #1024818Tom
Lead DeveloperLead DeveloperThe logo is centered regardless of where the menu items are (so it’s true centered). If you want the space to match, you’ll need to reduce the space between menu items a bit so it gives it more space on either side of the logo.
Let me know if you need more info π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 3, 2019 at 3:41 am #1025071Dmitry
Super! Let me know – the issue happened because of my CSS or it was originally in GP docs?
P.S. Im saving all useful specific css blocks for quick use in future projects with GP
-
AuthorPosts
- You must be logged in to reply to this topic.