Docs

[kobyco2]

Hello,

I see that in my website on a 10-12 inch laptops – the menu is still desktop menu and doesn’t look good, is there a way to make it a mobile menu on these kind of screens?

this is my website
http://ad-it.online/

Thank you

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:1250px){
    nav.x-nav-wrap.desktop {
        display:none;
    }

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

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

Hope this helps – thanks!

[kobyco2]

Hi,
cool, this helps a lot

Thank you

[John Ezra]

You’re most welcome!

[kobyco2]

Hi,

I see a problem for some reason – in some small screens the menu is by default open instead of being closed

Can you please check?

Thank you very much

[Christopher]

Hi there,

I can’t replicate the issue on your site. Please clear cache and test again or let us know how we we replicate this.

Thanks.

[kobyco2]

Hmmm, a bit problematic I agree, but here are some scenarios:

when I work on a 13 inch laptop and then open “customize” – the screen gets smaller and immediatly the menu opens up.
Also, when I tested it for different screen sizes, here is an example:
http://quirktools.com/screenfly/#u=http%3A//ad-it.online&w=1024&h=600&s=1

I understand that these are not standard scenarios, but I want to make sure that I am not missing anything and it also happens for “normal” users

Thank you

[Lely]

Hello There,

Please check this part of the CSS:

@media (max-width:1250px){
    nav.x-nav-wrap.desktop {
        display:none;
    }

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

    .x-nav-wrap.mobile {
        display: block;
    }
    .mobile-menu-item-div {
        display:none;
    }
}

Update this part:

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

To this:

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

Hope this helps.

[kobyco2]

Works like a charm, thank you!

[Rad]

You’re welcome!

[Author]

Posts