Anything less than 1085px and my main menu gets smushed and pushed down to the next row in sections and generally looks crumby.

Is there a setting in the customizer?

Thanks,

Lizzie

@media only screen and (max-width:1085px){
 .x-nav-wrap.desktop {
   display: none;
 }
 .x-btn-navbar {
   display: block;
   float: right;
 }
}

Any other questions ask me! 😀

P.S. The @media CSS code is annoying it may cause your code below it not to work unless you have the last “}”

Thanks for writing in!

You can use this code under Custom > CSS in the Customizer:

@media only screen and (max-width:1085px){
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display: block;
        float: right;
    }
    .x-nav-wrap.mobile.in,
    .x-nav-wrap.mobile.collapsing {
        display: block;
    }
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: relative;
        top: 0;
    }
}

To Daniel: Thank you for your contribution! 🙂

Thank you.

Thanks so much! This worked nicely.

However I am not sure if I have introduced a new problem?

Now when my screen goes above 980px my logo gets shoved down outside the x-navbar-wrap div and cuts off the top of my slider?

Any ideas where this is happening in my CSS? I can’t seem to figure it out.

Thanks so much!!

Let me know and I can open a new thread if necessary.

Lizzie

I think what she was asking is to have the navbar menu be stacked at a certain point and lower the rest of the page including the slider.

Correct me if I’m wrong, Lizzie

~Lizzie

Please add the following CSS under Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}

Hope it helps.