[Resolved] How do I swap the logo and menu position for mobile?

[Sean]

How do I swap the navigation logo and menu position for mobile view?

GeneratePress 2.0.2

[Leo]

Hi there,

So having the logo on the right and the menu toggle on the left?

Should be doable with mobile header: https://docs.generatepress.com/article/mobile-header/

Can you activate it first then we can help with some CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Thanks Leo, have activated the mobile header, could you also recommend CSS for putting the logo above the menu as well?

Thanks,
Sean

[Leo]

Ahh if you want the logo above header than mobile header can’t be used.

How are you hiding the header on desktop currently? With a snippet?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

I would like to have the option to both swap the logo left to right and also be able to move the logo above the nav, then I can split test.

I’m not sure what you mean by hiding the header on the desktop? As far as i see the header shows on desktop.

Thanks

[Sean]

Ah, I know what you mean now, to hide the header I am using the page builder Elementor. It enables me to disable layout elements including the header.

[Leo]

Let’s figure out the header first.

Instead of using Elementor, can you try this CSS so it will show on mobile?

@media (min-width:769px) {
    .site-header {
        display: none;
    }
}

Then your logo from site identity should show on top on mobile.

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Have added the code, but for some reason, I can not remove the navigation logo, so both the site identity logo and nav logo show in mobile view.

[Leo]

Try this CSS as well:

@media (max-width: 768px) {
    .navigation-logo.site-logo {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Is there also a way to centre the menu navigation in mobile view? It is now aligned to the right in mobile view.

Thanks,
Sean

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: none;
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Thanks Leo, all working good!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

I just updated the logo design, but now it won’t show in desktop. Any fix for this?

Thanks,
Sean

[Leo]

The navigation logo is still showing this image: https://www.thomas-services.com.au/wp-content/uploads/2018/05/TS-LOGO-BAR-1-min.png

Can you try reuploading it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts