Hamburger Menu on every Screen size - always open

[EIGENARTdigital]

Hey there,

for a new site with X - I want to show the Hamburger Menu on every Screensize at top/right.

On another Post I found this Code

/* Enable Mobile Navbar on Desktop */
.x-navbar {
  text-align: right;
}

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

.x-navbar .x-btn-navbar {
    display: inline-block;
}

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

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

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

So this works mostly fine. The only Problem I have is - the Dropdown Menu is always open now. When click on the Hamburger Icon - Dropdown closes for 1 sec. but immediately opening again.

What do I have to optimize, that the Dropdown is closed from the beginning and just opens by clicking the Icon?

Thanks for your advice
Andy / EIGENARTdigital

[jade]

Hello Andy,

Please remove your code and try this:

By default, X’s mobile menu displays on 980px breakpoint.

There is no available option to change this but some lines of custom CSS can override the default theme CSS.

    .x-nav-wrap.desktop {
        display: none
    }
  
    .x-nav-wrap.mobile {
        display: block
    }
  
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
  
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
  
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
  
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }

However, please note that since this is something that overrides the default functionality of the theme, we cannot provide further support if you need to change it or if you require further updates to the code.

Hope this helps.

[EIGENARTdigital]

Hey Jade,

thank you very much - this code works fine now.

Have a nice day and stay healthy!
Andy / EIGENARTdigital

[jade]

You’re most welcome, Andy.

Stay safe and healthy as well!