Archived topic
Move Hamburger Menu left of Logo in Desktop
5 replies · Started by Chris on November 4, 2018
Hello,
I would like to move my hamburger menu - in desktop - to the left of my logo. My site is - lifeofadventure.com
This site is on generatepress and they have the hamburgermenu left of logo as I want - healthambition.com
Can I accomplish this with css or do I need to hack my theme files?
Note: I have already moved the hamburger menu left of the logo in mobile.
ALSO - healthabition has social buttons in their menu - is that something that can be done with core functions or is that also a hack?
Thanks
Hi there,
This should do it:
li.slideout-toggle {
position: absolute;
left: 0;
}
.inside-navigation {
position: static;
}
.inside-header {
position: relative;
}
.inside-header .site-logo {
margin-left: 40px;
}As for adding icons to your menu, this should help: https://docs.generatepress.com/article/adding-icons-to-menu-items/
Looks good except one thing - when I scroll down the hamburger menu drops below the menu and disappears - you can see in this screenshot - if you hover your mouse where the arrow points you can see the hamburger menu appear:
https://www.screencast.com/t/VTOw2jPrIOaV
Ah, try adding this as well:
.navigation-stick .inside-navigation {
position: relative;
}
.navigation-stick li.slideout-toggle {
top: 0;
}That did the trick. Thanks!
You're welcome :)
