[LizzieParticipant]

I would like to make my mobile menu appear at screen resolutions higher than 980px wide, but can’t seem to do so.

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

[danielhickmanParticipant]

Place this in your 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;
 }
}

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 “}”

[ZeshanMember]

Hi Lizzie,

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.

[LizzieParticipant]

URL: skeenaflyfishing.com

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

[ThaiModerator]

Hi Lizzie,
Thank for writing in.
I’ve just visited your website and the logo seems to display fine on my browsers.
Could you show me some screenshots, please?
Thanks

[danielhickmanParticipant]

She changed it. It used to have the Navbar menu below the logo, slightly covering the top of the slider. Now the mobile menu starts at 1920px wide. (which is my laptop’s size, so “mobile menu” seems a bit out of place.)

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

[RadModerator]

@Daniel, I’m not sure about that too, maybe Lizzie could clarify it 🙂

[LizzieParticipant]

This reply has been marked as private.

[LizzieParticipant]

Thanks @Daniel! I am having them log in to my site and have a look at what I’ve done as the problem only appears on my home test page and isn’t visible on my current live site. Appreciate all your help and will keep you updated if the problem reveals itself.

~Lizzie

[ChristopherModerator]

Hi there,

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

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

Hope it helps.

[LizzieParticipant]

Hi There!

I tried adding the css you recommended first to just the @media sections where I force the mobile menu to appear – this was unsuccessful. I then tried adding the css just into the main area of the style sheet – also unsucessful.

It is so odd, the problem appears precisely at 980px of screen width, but I don’t have any matching CSS breakpoints. It disappears again at 1330 px when I allow my normal desktop menu to appear again.

Up until 980px of width, the mobile menu shows with the logo above and no padding or margin above the logo, however once it crosses that threshold the logo pops down and pushes the mobile menu button over the slider, obscuring it.

This makes me think there must be a theme css breakpoint at 980px to activate/deactivate the mobile menu?

I think I force my navbar to be a certain height in the customizer.

I didn’t see the problem prior to implementing the forced mobile menu so it leads me to believe I am somehow bringing padding or margin with me when I force the menu? I could be totally off base. LOL I literally haven’t the slightest clue!

Thanks again for all your help. The account for you will still exist with the same password as my indicated in the private message earlier.

Take care,

Lizzie

[ChristopherModerator]

Hi there,

No need to use @media, Please just add this code in your CSS :

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

Thank you.

[LizzieParticipant]

Hi There!

I tried this in the main CSS to no avail, however, I managed to remedy the issue with the slider being covered by moving my

.masthead {
min-height: 122px;
}

to the main CSS area.

I stil have an issue with blank space showing up above the logo between 980 and 1330px width.

Any help as always is appreciated.

Thanks again!

Lizzie

[LizzieParticipant]

whoops! just checked and issue solved!!!

thanks again for all the help!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts