Docs

[rodriga7]

Hello X Theme Support!

I am working on my personal website (ExoticCircuits.com) and I have an issue with my Navbar taking up too much room on my screen when the browser window is minimized. I have tried my site in Chrome, IE and Firefox and they all seem to behave the same way; as the browser window is being shrunk the Navbar jumps below my logo and if we keep shrinking the page then the search also jumps to a new row below my Navbar (please see the images attached). What I would like to have happen is instead of the navbar creating new rows, I would like to get the ‘three horizontal line Icon’ (see attached image called “expected header”) for the menu as soon as the navbar and the search do not fit on the same row. Is this something that can be fixed in CCS? if so could you please instruct me in the right path.

Thank you in advance for all your help.

-Andres

[Joao]

Hi There,

You can either adjust the link spacing on Appereance > Customizer > Custom Header and squeeze the links a bit more in order to avoid this.

or as you mentioned you can make the mobile menu appear earlier-

For that you can add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 1017px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Adjust the screen width where you would like te switch to happen, on the code above at the moment it is at 1017px.

Hope that helps,

Joao

[Author]

Posts