Responsive menu

[PernillaA]

The menu on iPad is not showing correct. It´s divided in 2 lines. How do I fix this issue?
http://getel.nyhemsida.eu/

[Veena]

The menu will not be able to arrange in a row , because the menus font size is too large.
The thing we can do is that we can switch the mobile menu earlier at 1024px.

@media only screen and (max-width: 1024px){
#primary-menu {
    display: none !important;
}
#header.sticky #primary-menu{
    display: none !important;
}
#mobile-menu-toggle {
display: block;
}}

[PernillaA]

Thank you!!

[PernillaA]

I made the change but the “mobile menu button” does not work! ?

[Raghavendra]

Can you pls enhance the CSS (remove old one and paste the below) –

@media only screen and (max-width: 1024px){
    #primary-menu {
        display: none !important;
    }
    #header.sticky #primary-menu{
        display: none !important;
    }
    #mobile-menu, #mobile-menu-toggle {
        display: block;
    } 

    #mobile-menu, body {
        -webkit-transition: left 0.4s ease-in-out 0s;
        -moz-transition: left 0.4s ease-in-out 0s;
        transition: left 0.4s ease-in-out 0s;
    }
    body {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }

    body.push-right {
      left: 240px;
    }
}

[PernillaA]

Ii am sorry but I can not make it work. Can you tell me in which line in css I put this. I tried at row 614.
I am sorry for the inconvenice!

[Veena]

Pls go to Appearance > Themeoptions > Custom CSS tab and copy paste the custom CSS there and save changes. You are done.

[Author]

Posts