[Support request] Mobile Header Order: Search (left), Logo (center), Menu (right)

Home Forums Support Mobile Header Order: Search (left), Logo (center), Menu (right)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1239220
    Alex Wideman

    Hi,

    I’m looking to center the logo in my mobile header only, have the search on the left and menu on the right.

    The closes I’ve gotten is using the following code from https://docs.generatepress.com/article/centering-logo-mobile-header/

    #mobile-header .site-logo {
        position: absolute;
        left: calc( 50% - 131px); /* 50% from the left - half your image width */
    }
    
    #mobile-header button.menu-toggle {
        position: absolute;
        left: 0;
    }
    
    #mobile-header .mobile-bar-items {
        margin-left: auto !important;
    }

    But the search/menu still need to be swapped and the logo isn’t won’t fit between them.

    I’ve tried a number of the “center mobile header” solutions on these forums, but none seem to work – though I realize that this ordering goes against the grain.

    I am using Navigation as Header, Mobile Header is On and sticky header is off.

    Any direction you are able to provide would be appreciated.

    Thanks,

    Alex

    #1239307
    David
    Staff
    Customer Support

    Hi there,

    try this CSS instead:

    #mobile-header {
        position: relative;
    }
    
    #mobile-header .site-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
        margin-left: 0;
    }
    
    #mobile-header .mobile-bar-items {
        margin-right: auto !important;
    }
    .site-logo.mobile-header-logo img {
        height: auto !important;
        max-height: 60px;
    }
    #1239817
    Alex Wideman

    Works perfectly, thank you kindly David!

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