[Resolved] Different Header on Mobile (Nav left, Logo center, Cart and search right)

Home Forums Support Different Header on Mobile (Nav left, Logo center, Cart and search right)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1310207
    nik9

    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

    #1310339
    David
    Staff
    Customer Support

    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;;
    }
    #1310915
    nik9

    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;
        }
    }
    #1311012
    David
    Staff
    Customer Support

    Try this CSS to correct that:

    .main-navigation .mobile-bar-items.wc-mobile-cart-items {
        order: 1;
    }
    #1311835
    nik9

    Hi David,

    Thanks a lot! 🙂

    Cheers

    #1312181
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.