How Do I make The Mobile Hamburger and Logo Centre

[rabbler]

Hi, Im just working on developing my site and want to make the mobile hamburger and logo centred. Like with the logo in the centre and then the mobile hamburger underneath it.

Is there away of doing that?

Oh and how do I change the colour of the hamburger?

The site is here: http://wordpress-137779-398956.cloudwaysapps.com

thanks

[basanta]

Hi There,

Thanks for writing in!

Please add this css to your theme option -> Custom -> Global CSS and let us know how this goes.

@media (max-width: 767px) {
x-btn-navbar {
 float: none;
text-align: center;
}
.x-brand {
float: none;
}
}

Hope this helps;

Thanks

[rabbler]

@basanta

@media (max-width: 767px) {
x-btn-navbar {
float: none;
text-align: center;
}
.x-brand {
float: none;
}
}

Doesnt appear to have worked? Like the logo is centred now and I found my own way to make the hamburger a different colour.

Can the hamburger be centred under the logo for balance??

[kory]

Hello @rabbler,

Thanks for writing in! There are a couple things you can do here:

• If you’re just wanting to vertically center the mobile button better, there is a setting in Theme Options inside the Header Section called Mobile Navbar Button Alignment, which allows you to vertically center the navbar button within the header.
• If you’re wanting to have both your logo and mobile button stacked on top of one another and centered, you can go back to Theme Options in the Header Section and chose for the Layout of your header to go from “Inline” to “Stacked.” This will ensure that your logo and mobile button are on top of one another and horizontally centered, but keep in mind that this will also center your desktop navigation and logo as well.

Hopefully this helps to point you in the right direction, cheers!

[rabbler]

I cant see that option for the mobile button where exactly is it?

Sorry I see it now, that just allows me to move it up and down, not make it cetnred horizontal. I also dont want the desktop to revert to stacked.

[thai]

Hi There,

Please try updating the previous CSS to this:

@media (max-width: 767px){
    .x-navbar {
        padding: 8px 0;
    }
    a.x-brand.img {
        float: none;
        text-align: center;
    }

    a#x-btn-navbar {
        float: none;
        text-align: center;
    }
}

If it doesn’t work, please provide us with your admin account and password so we can take a closer look.

Let us know how it goes!