Site logo

Archived topic

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

18 replies · Started by Sean on May 1, 2018

Viewing posts 1–15 of 19

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

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

Thanks,
Sean

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 :)

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

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.

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.

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.

Try this CSS as well:

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

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

Try this CSS:

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

Thanks Leo, all working good!

No problem :)

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

Thanks,
Sean

This archived topic is closed to new replies.