Docs

[growiowapac]

Hello support! I’m writing from growiowapac.com.

I like the inline look of the fixed header, but the left-align of the head and right-aligned, terribly-spaced mobile button is ew. How can I fix this? I’d appreciate a step in the right direction. I think I’d like to center it all, and add space under the mobile button, but I don’t want it to affect my web layout. Is that possible?

THANK YOU VERY MUCH.
Jacy

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
a.x-brand.text {
    font-size: 26px;
}
}

Hope that helps.

[Paul R]

Hi Jacy,

Yes, it’s possible.

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 480px) {
.x-navbar .masthead-inline .x-btn-navbar {
    display: block;
    float: none;
    text-align: center;
    padding-bottom:20px;
}

.x-navbar .x-brand.text {
    width: 100%;
    text-align: center;
    float: none;
}
}

Hope that helps.

[growiowapac]

Thank you for your help! Sorry I didn’t respond sooner!

This solution works — the text did, but the menu button still didn’t center. Any MORE ideas?

[growiowapac]

(for reference.)

[Rue Nel]

Hello There,

Thanks for the updates! To center the mobile menu icon, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    display: inline-block;
    float: none;
  }

  .masthead-inline .x-navbar-inner {
    text-align: center;
  }
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts