Docs

[Kelley Chambers]

How do i tell my child theme to force the hamburger menu on everything with a tablet resolution and smaller? I loathe how my menu breaks to a new line at certain dimensions.

[Thai]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Kelley Chambers]

Ok, let me try to rephrase this. first and foremost, I need you to understand what a hamburger menu is if you don’t already. It is a Mobile menu style that was first introduced in android operating systems. It’s now the gold standard on all platforms for displaying web site navigation on mobile devices.

X – theme does use this type of navigation but it is only shown at specific break points based on display size. however, I want to have full control when this menu is displayed. I want to be able to tell it to only display the hamburger menu on screen resolution of 1080 pixels or less. how do I accomplish this?

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 1080px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope that helps

Joao

[Kelley Chambers]

Yep, PERFECT! Thank you SO MUCH for your help! Cheers!!!

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts