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

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.

at 1070px please.

Thanks
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.

Kind regards
Hewitt

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

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!

Cheers!