Archived topic
How do I swap the logo and menu position for mobile?
18 replies · Started by Sean on May 1, 2018
How do I swap the navigation logo and menu position for mobile view?
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?
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
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?