 
	
		
		
		
		
			
Hi
I’m trying to make the burger menu appear earlier because my main menu is wide and overlaps the logo.
I have used the following code in css but I get two burger/mobile menus appearing between about 990px and 1430px width:
@media only screen and (max-width: 1430px) {
  nav.main_menu {
    display: block !important;
 }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}How do I remove one of the burger/mobile menus please?
Thanks
Hey jscarlett,
Sorry for the late reply, please try changing your css above to this:
@media only screen and (max-width: 1430px) {
  nav.main_menu {
    display: none !important;
 }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block !important; 
  }
}Best regards,
Mike
Hi Mike
Thanks for your response. I changed the css but now both burger menus have disappeared.
Any ideas?
Thanks
Jane
Hi Mike
I removed the top part and changed it to this – and it works now – so thanks for your help!
Jane
@media only screen and (max-width: 1430px) {
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block !important; 
  }
}Hi,
Glad to hear you have sorted it out, we will close this now. Thank you for using Enfold. 
For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :) 
Best regards,
Mike
