Archived topic
Logo floating on the right of the hamburger menu in mobile mode
3 replies · Started by Kai-Yen on June 16, 2018
I have two questions about navigation menu position.
1. Currently, header logo and menu are centered in mobile mode shows as image 1.
However, I would like to make the header logo being right and the menu being left as image 2, and apply the same effect to sticky navigation.
image 1
image 2
2. In tablet mode, the navigation menu is floating right showing as below. How do I make it to be centered?
Hi there,
1. I would use the mobile header option (https://docs.generatepress.com/article/mobile-header/), then we can use some CSS to move the logo to the right.
2. Try this:
@media (max-width: 1000px) {
#site-navigation {
float: none;
text-align: center;
}
#site-navigation .main-nav > ul > li {
float: none;
display: inline-block;
}
}Hi Tom,
Thank you. I would like to keep my design that logo switching style.
So I did this.
@media (max-width: 768px){ .regular-menu-logo .navigation-stick .navigation-logo, .sticky-menu-logo .main-navigation .navigation-logo{
float: right}}
@media (max-width: 768px) {.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle, .sticky-menu-logo .navigation-stick:not(.mobile-header-navigation) .menu-toggle
{float: left;}}Awesome! All looking good for you now? :)
