Archived topic
Sticky nav menu has moved to the right
7 replies · Started by Keith Taylor on April 8, 2022
Hi
I have a sticky nav menu which (on desktop view) used to be aligned to the left, next to the logo, with the secondary nav in the menu bar items on the right. A few days ago I temporarily deactivated the secondary menu in GP settings to debug an unrelated issue. When I reactivated secondary nav in GP settings, the sticky main nav had moved to the right. I didn't change any CSS or any other settings, and I can't work out why this has happened. I've tried to find a CSS solution but with no luck, Can you help?
Many thanks
Keith
Hi there,
did the Hamburger icon display before or after the logo ?
It displayed after the logo
Hmmm... odd that it was positioned like so without some CSS.... try adding this CSS:
.main-navigation .menu-bar-items {
order: 3;
}
.mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
margin-right: unset;
}
#mobile-header .menu-toggle {
margin-right: auto;
}This brought the hamburger next to the logo on mobile view rather than on the right of the menu bar. But it didn't make the menu (without hamburger) go to the left on wider (desktop) view.
I can bring the menu to the left in dev tools by deselecting "margin-right:unset" on this class:
.nav-float-right .navigation-stick .navigation-branding
...but it also brings the menu bar across with it, rather than leaving the menu bar on the right.
Sorry my bad - I thought we were talking mobile doh ! Use this CSS:
.nav-float-right .navigation-stick .navigation-branding {
margin-right: unset;
}
.navigation-stick .main-nav {
margin-right: auto;
}That's solved it, many thanks!
You're welcome
