[Support request] Logo floating on the right of the hamburger menu in mobile mode

[Kai-Yen]

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?

[Tom]

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;
    }
}

[Kai-Yen]

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;}}

[Tom]

Awesome! All looking good for you now? 🙂

[Author]

Posts