Archived topic
Different Header on Mobile (Nav left, Logo center, Cart and search right)
5 replies · Started by nik9 on June 1, 2020
Hello,
First Thanks for your amazing and fast support.
I tried to create a different header on mobile. for UX reasons I would like to move the NAV Hamburger to the left, the logo centerd and the cart and search icons to the right. This should also affect the Sticky header on Mobile. I try to reach this with the Elements GP Builder but I had no success. I also read this doc https://docs.generatepress.com/article/mobile-header/ but there no info for this. On Desktop I would like to leave the header as it is now.
Is there a way to reach this in a easy way?
Cheers & thanks
Hi there,
try adding this CSS:
#mobile-header .inside-navigation {
position: relative;
}
.site-logo.mobile-header-logo {
margin: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;;
}Hi David
Cool! Works. But now the cart icon and the search icon are now interchanged when I compare this with the desktop view. The Search should be on the edge.
Also I want to change the X to close the Navigation in the upper left. So I tryed with this css below. But the X to close the Nav is always in the upper right. Do I have to use more margin or is there a other nice way?
Means I have to combine there two css. I can simply past this in the css section but I also interested in clean css code. Maybe you can give me also a hint how I should combine this two css in a GP clean way. :)
@media (max-width: 768px) {
.slideout-navigation.do-overlay .slideout-exit {
position: absolute;
top: 0px;
right: -5px;
}
.slide-opened button.menu-toggle {
opacity: 0;
}
.slideout-navigation.do-overlay .inside-navigation {
padding-top: 110px;
}
}Try this CSS to correct that:
.main-navigation .mobile-bar-items.wc-mobile-cart-items {
order: 1;
}Hi David,
Thanks a lot! :)
Cheers
You're welcome
