Docs

[Hewitt W]

Hi there

Is it possible to set the browser size at which point my menu will turn into the mobile menu in the customizer’s css? I would prefer this than my menu dropping into two lines when the window resizes.
The website is http://yogazone.co.za/new_site/
Thanks in advance as your service is always impeccable!

Kind regards
Hewitt

[Rue Nel]

Hi Hewitt,

Could you please specify which screen size you would like to turn your menu into the mobile menu? Right now, the menu turns into a mobile menu when the screen size is less than 980px.

Thank you.

[Hewitt W]

Hi,

at 1070px please.

Thanks
Hewitt

[Rue Nel]

Hi Hewitt,

Please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

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

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

  .x-nav-wrap.mobile.collapse{
    display:none
  }

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

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

  .x-navbar-inner {
    text-align: center;
  }

}

Please let us know if this works for you.

[Hewitt W]

Thank you once again. You guys rock rock!!!

Kind regards
Hewitt

[Zeshan]

You’re welcome! 🙂

[Mark C]

Greetings!

I used the code above on this site and changed the max width to 1200 – but the hamburger icon disappears for a few hundred pixels when resizing the window to test it and then reappears. Can you guide me on what is causing that?

Home

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (min-width:  980px) and (max-width: 1200px){
	.x-navbar .x-btn-navbar  {
		display: inline-block;
    	float: right;
	}
}

Hope it helps, Cheers!

[Mark C]

Problem solved! Thanks!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts