Docs

[RinardMedia]

Hello!

My goal was to make the menu drop to the mobile nav sooner so that the desktop nav doesn’t jump to the next line. This is the code I used. I am sure I missed something as during this pixel range, the mobile nav button doesn’t work. I also want the button to align center during this range.

devmmh.rinard.digital

@media (min-width: 980px) and (max-width: 1200px){
.x-navbar .x-btn-navbar {
display: inline-block;
}
}
@media (min-width: 980px) and (max-width: 1200px){
.x-navbar .desktop .x-nav {
display: none;
}
}

Thanks for your help!

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[RinardMedia]

I did. 🙂
It’s devmmh.rinard.digital

[Joao]

Hi There,

Use the following code instead.

Hope it helps

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

[RinardMedia]

Much better. How can I center the button?

[Joao]

Hi There,

Update the code to :

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

Hope it helps

Joao

[RinardMedia]

That’s a little bit closer. Still around 1200px the mobile menu button aligns left, once the site drops to about 790px it aligns center.

How can we make it align center the entire range?

Thank you for your help!

[Joao]

Hi There,

Please add the following code:

.x-navbar-inner {
    text-align: center;
}

Thanks

Joao

[RinardMedia]

That did it.

Thanks so much!

[Joao]

Glad to hear it 🙂
Have a great weekend.

[Author]

Posts