[Resolved] How to Center Logo on Mobile

Home Forums Support [Resolved] How to Center Logo on Mobile

Home Forums Support How to Center Logo on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1634926
    Leighton

    Hello!

    I’m attempting to move my mobile logo (I have the mobile header enabled) to the center, and have the search icon on the right, and the hamburger menu icon on the left of the logo. Also, is it possible to make the search icon and hamburger menu icon a little bolder?

    Staging site: https://wordpress-538093-1721667.cloudwaysapps.com/
    Current appearance: https://imgur.com/Hul0dv6
    Desired appearance: https://imgur.com/qDipgtv

    Thanks!

    #1635020
    Elvin
    Staff
    Customer Support

    Hi there,

    You can try adding this CSS:

    .site-logo.mobile-header-logo  {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%); 
    }
    #mobile-header .menu-toggle {
        order: -1;
        margin-right: auto;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1635033
    Leighton

    Hey, thanks! That worked well… The only thing is that the logo doesn’t seem quite center-aligned on mobile. Or am I wrong?
    Also, what’s the best way to add padding to the left and right sides of the mobile header, so that it’s closer to the main container padding? Something like this?

    #mobile-header {
    	padding: 0px 10px;
    }

    As far as I can tell, there are no mobile header padding options in the customizer.

    I appreciate the help!

    #1635048
    Elvin
    Staff
    Customer Support

    The only thing is that the logo doesn’t seem quite center-aligned on mobile. Or am I wrong?

    Ah yes, That’s from the margin-left: 10px; being added to .site-logo.mobile-header-logo

    We can add margin-left: 0px !important; to the .site-logo.mobile-header-logo to address this.

    Also, what’s the best way to add padding to the left and right sides of the mobile header, so that it’s closer to the main container padding? Something like this?

    That works. This works as well too. 🙂

    #mobile-header .inside-navigation {
        padding: 0 10px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1635068
    Leighton

    Awesome! Thanks

    #1635078
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1941758
    Kwame

    Hi,

    I implemented this code on my site, but nothing seemed to have happened.

    What could I missing?

    Thanks!

    #1941883
    Ying
    Staff
    Customer Support

    Hi Kwame,

    This CSS won’t work if you are not using mobile header which can be activated at customizer > layout > header.

    If after activating mobile header, it still doesn’t work, can you open a new topic and link us to your site?

    Let me know 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.