Do not collapse menu until very small screen

[bluekat]

I only have 2 menu items, so I do not want the menu to collapse until the screen is quite small. I found this code below, but it does not seem to work.

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

.x-nav-wrap.desktop {
display: none;
}

.x-nav-wrap.mobile {
display:block;
}

.x-nav-wrap.mobile.x-collapsed {
display: none;
}
}

[nabeel]

Hi @bluekat,

Thank you for reaching out to us. You should use this code instead in the Theme Options > CSS:

@media screen and (min-width: 480px) {
  .x-btn-navbar {
    display: none !important;
  }

  nav.x-nav-wrap.desktop {
    display: block !important;
  }
}

Feel free to adjust the screen size (min-width: 480px) in the code as per your need. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[bluekat]

I can work with that!

Except now the Search button has the text “Search” on the smaller screens whereas on the larger screen there is just a search icon. I want it to always have just the icon, no “search” text.

Based on Inspect Element, I tried

.x-hidden-desktop {
display: none; !important;
}

but that did not seem to do it.

[paul.r]

Hi,

You can try this code instead.

.x-nav-wrap-mobile .x-btn-navbar-search span.x-hidden-desktop {
   display:none !important;
}

Hope that helps.

[bluekat]

Nope. Still says “search”.

[nabeel]

Hi again,

Please replace this code:

@media screen and (min-width: 480px) {
  .x-btn-navbar {
    display: none !important;
  }

  nav.x-nav-wrap.desktop {
    display: block !important;
  }
}

With this:

@media screen and (min-width: 480px) {
  .x-btn-navbar {
    display: none !important;
  }

  nav.x-nav-wrap.desktop {
    display: block !important;
  }
  span.x-hidden-desktop {
    display: none !important;
  }
}

Let us know how this goes!

[bluekat]

Success! You guys are great!

[nabeel]

Glad we could help.

Cheers!