Docs

[MatthewChivers]

I’m very confused.

I want to change the width at which the standard menu changes to the hamburger / mobile button menu.

I have tried various methods suggested both here on the forum and over at the X Theme Group on Facebook. None of them are working correctly.

Really hoping someone can help.

[Rahul]

Hey There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[MatthewChivers]

Okay Awesome! It’s https://matthewchivers.co.uk/

I’ve tried a number of @media solutions.
Some have simply done nothing, others have had undesirable consequences.

(All my attempts have now been deleted and “customise” is clean except for the css I’ve applied to other things).

[Joao]

Hi There,

Please add the following code to Appereance > customizer > custom > CSS and adjust according to your needs.

@media (max-width: 1017px) {
    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

[MatthewChivers]

Hey there.

Thanks for the response but this hasn’t worked. 🙁

The menu is currently set to only become a mobile button at 200px wide. As you’ll be able to see, this isn’t happening.

Customizer saved and cache cleared.

Hope we can find a solution? 🙂

Matthew

[Thai]

Hi Matthew,

Please try with this CSS instead:

@media (max-width: 1024px){
	a.x-btn-navbar {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 42.16px;
    }
    .x-nav-wrap.desktop {
    	display: none;
    }
    .x-nav-wrap.mobile.collapse.in {
    	display: block;
    }
}

Hope it helps 🙂

[MatthewChivers]

Okay, I just tried that code and still nothing. Customizer saved and cache cleared.

The exact code I used:

@media (max-width: 100px){
	a.x-btn-navbar {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 42.16px;
    }
    .x-nav-wrap.desktop {
    	display: none;
    }
    .x-nav-wrap.mobile.collapse.in {
    	display: block;
    }
}

Changed the max width example from your 1024 to my 100 (put it so low just to prove that no matter how low it’s set it won’t change).

🙁 Sad Times

[Thai]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[MatthewChivers]

This reply has been marked as private.

[Rad]

Hi there,

It’s the reverse, please try this

@media (min-width: 100px){
    a.x-btn-navbar {
        display: none;
    }
    .x-nav-wrap.desktop {
    	display: block;
    }
    .x-nav-wrap.mobile {
    	display: none;
    }
}

That’s because mobile menu starts at 979px and max-width with the smaller size than 979px will just be the same. Hence to counter it, use min-width.

Cheers!

[MatthewChivers]

This is the closest it’s been to working! But the mobile menu is showing as well as the regular one now. Tried with old code in place, without it, and with !important in a couple of places.

Thanks for the help so far! 🙂

[Joao]

Hi There,

Please add the following code(just the code below) and it will work for sure:

@media (min-width: 100px) {
  
  .x-btn-navbar, .x-btn-navbar.collapsed {
  	display: none !important;
    }
  
    .x-nav-wrap.desktop {
    	display: block;
    }
    .x-nav-wrap.mobile {
    	display: none !important;
    }
}

Hope it helps

[MatthewChivers]

YES!!! WE GOT THERE!
Thank you very much. Really appreciate the help 😀

[Thai]

Glad we’re able to help 🙂

If you need anything else please let us know.

[Author]

Posts