Using Mobile Nav Menu Even On Desktop

Hi,
I searched the forums and found this code

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

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

.x-navbar.x-navbar-fixed-top {
position: fixed !important;
}
.x-btn-navbar {
box-shadow: none;
border-radius:0;
background-color:#2a484a;
}

Which works except the dropdown menu only shows when I am on a mobile device. You can see what I mean on my live site here

I tried to do

@media (min-width: 980px){
.x-nav-wrap.mobile {
display: block;
}
}
but that made the sub menu show all the time instead of just when I clicked on the hamburger.

Thanks!

Hi there,

Please try this:

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

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

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

  .x-nav-wrap.mobile.collapse,
  .x-nav-wrap.mobile.x-collapsed {
    display: none !important;
  }

Here are some related links for further reading:

Hope this helps.

Hi! That got the menu to go down on desktop! Thanks so much :slight_smile:

One more quick question. If you look at the site https://trulycreativedesign.com/ when I scale down to mobile size it moves the hamburger into the middle of the nav. Could I keep this off to the side? Also is there a reason it moves up and down when opening and closing the menu?

Thanks so much

Here is my css currently:

.x-navbar-inner {
margin-top:-80px;
display:inline-block;
}
.masthead .x-btn-navbar {
display: inline-block;
float: left;
}

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

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

.x-nav-wrap.mobile.collapse,
.x-nav-wrap.mobile.x-collapsed {
display: none !important;
}

Hi There,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. I advise that you upgrade to PRO if you need to create a custom header.

X To Pro Conversion

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.