Docs

[Richard M]

Hi, I need to know how to center the mobile nav button… when sized horizontal it is fine but when vertical it is way off… see image. How can i fix this?

Thank You!

[Kory]

Hey Richard,

Yes, I can see that your logo is a big long and pushing the button down. If it’s at all possible, sizing the logo down is typically a better option. If not, try entering this into the Custom section of the Customizer in the CSS field:

@media (max-width: 979px) {
  .x-navbar {
    text-align: center;
  }

  .x-brand {
    float: none;
    display: inline-block;
  }

  .x-btn-navbar {
    float: none;
    display: block;
    margin: 20px auto;
    width: 53px;
  }
}

What this is doing is when a device’s viewport is no longer than 979px (when the mobile button displays), it will center everything in your navbar. You might need to adjust a few settings, such as the margin on the button, and it’s width, but this should get you in the right ballpark of what you’re wanting.

Thanks!

[Richard M]

Thank You! That worked perfectly! AND Thank you for the very quick response 🙂

[Kory]

No problem. That’s what we’re here for.

🙂

[Author]

Posts