Show mainmenu in tablet view, don't show burger icon

Hi
Where and what to edit, if I just want to show the normal mainmenu in tablet view. I don't want it to show the bruger icon. My menu only has two items, so mainmenu can easily be shown on a tablet too.

Se my site here

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:1040px) {
#gkMobileMenu {
    display: none !important;
}

#gkMainMenu, #gkExtraMenu {
    display: block !important;
}
}


Hi
I did this:

Code: Select all

/* Show mainmenu on iPad too. Don't use burger icon */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1040px)
and (-webkit-min-device-pixel-ratio: 1) {
   
   #gkMobileMenu { display: none !important; }
   #gkMainMenu, #gkExtraMenu { display: block !important; }
   
}


This will work on iPad, but still show burger icon on mobile devices.

Hi

That's because min-device-width: 768px tells to not use this code on mobile. Just try to remove it. Also You may need to use a higher priority css selectors:

Code: Select all

@media only screen and (max-width:1040px) {
body #gkMobileMenu {
    display: none !important;
}

body #gkMainMenu,
body #gkExtraMenu {
    display: block !important;
}
}


Hi
Sorry, I stay with my solution. Your last solution gives me mainmenu in Mobile too.
My code gives mainmenu in desktop and tablet and burger icon on mobil. Just like I want.
Thanks for helping find a solution.
Henrik

Hi

I thought that was Your request

It can be easily manipulated with max/min screen widths:

Code: Select all

@media only screen and (max-width:1040px) and (min-width:-767px) {