Reduce or Disable Navbar Menu Breakpoint

Support
#1

Hello Ya’ll,

My menu only consists of 3 icons. As such, it is redicuously to have the menu break to the mobile button/ hamburger at 980px (or whatever the default is).

Could you please explain how I can reduce the breakpoint to virutally nothing, or disable the mobile button/ hamburger completely.

Thank you in advance,
Tx

www.aroundthebloc.co

#2

Hello,

Thank you for writing in!

To hide the hamburguer menu, add the following custom CSS code:

@media (max-width: 979px){
  .x-nav-wrap.mobile.collapse {
    display: block;
  }

  a.x-btn-navbar {
    display: none !important;
  }
}
#3

Hi John,

Thank you very much for your reply - the css code provided worked well, however it doesnt serve the goal I am after. I apologise, I didnt explain myself very clearly.

Would you mind taking a look at the menu I have at www.aroundthebloc.co ?

The menu is the three icons over the revslider - I made it transparent and added a negative margin-top to achieve this.

When on small screens, the code you provide makes the menu into the mobile version - however I would like the menu (i.e. those three icons) to stay as just those three icons for any sized screen.

Since they are only three icons, I dont need to have the mobile menu show up.

(by mobile menu, I mean the menu list of items that the main menu transforms into).

Kind Regards,
Tx

#4

Hello There,

Thank you for the clarifications. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

@media (max-width: 979px){
  body .x-nav-wrap.mobile.collapse {
      display: none;
  }
  
  body .x-nav-wrap.desktop {
    display: block !important;
  }
}

You should have a layout like this:

Hope this helps. Please let us know how it goes.

#5

Hello RueNel,

Thank you so much for the css - it works like a dream.

Thank you also John for his contribution previously.

You guy are the best :slight_smile:!

#6

You’re most welcome as always!
It’s good to know that it has worked for you.

#8

I tried this and got half-way. I now have the full menu available at all times, but the hamburger still appears at the break point. Any thoughts?

www.zerocraftcorp.com

#9

Hi There,

Please also add this custom CSS:

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

Let us know how it goes!