Problems after putting social media icons & search box in the mobile menu

Hey coolicious,
Thank you for the link to your site,
#1 For mobile (425px) the social icons do not show as default, for tablet (768px) they do, but you have quite a few of them that push the burger menu and your 3 extra menu icons over on top of your logo, so perhaps you would like to hide the social icons until 1007px?

@media only screen and (min-width: 767px) and (max-width: 1007px) { 
	#top #header_main .main_menu > .social_bookmarks.icon_count_7 {
		display: none;
	}
}

The reason they disappear when the menu is clicked is because the script is moving the icons to the new location.
#2 To deactivate Ajax suggests, please see this post.
#3 to hide the search and show the burger menu between 767px ▸ 1007px, try this css:

@media only screen and (min-width: 767px) and (max-width: 1007px) { 
	#menu-item-42751 {
		display: none;
	}
	.responsive #top .av_mobile_menu_tablet #avia-menu.av-main-nav .menu-item-avia-special {
		display: block;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, please try adding this css:

@media only screen and (min-width: 641px) and (max-width: 1007px) {
.av-burger-menu-main.menu-item-avia-special,
.av-burger-menu-main.menu-item-avia-special:hover {
	z-index: 110;
	position: relative;
}
.av-main-nav {
    z-index: unset;
}
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike