How to fix mobile menu issues

This is overall a great free theme, but it has some issues handling responsive menus.

Specifically, if you’re on a screen under 919 pixels, the menu toggle shows up. If your menu is too big, it disappears when you try and scroll down.

As this is controlled by javascript, there is no way to get rid of the problem until the theme developers handle it, but a handy workaround is the following:

@media screen and (max-width: 919px){
	header#header {
		display: block !important;
	}
}

Additionally, I didn’t like the way the mobile menu looked. It floated weirdly on tablets, the search was missing, submenus weren’t handled nicely, and more. I made the following changes below.

**PLEASE NOTE: This code is for a right-to-left layout. Just change all the right to left and likewise for a left-to-right layout.

@media screen and (max-width: 919px){
	header#header {
		display: block !important;
	}
	.site-nav {
		padding-bottom: 7px;
	}
	.site-nav > ul > li {
		float: none;
	}
	.site-nav li ul li {
		float: right;
	}
	.site-nav > ul > li + li {
		margin-right: 0px;
	}
	.site-nav li ul li + li > a {
		border-top: none;
	}
	.site-nav li > ul {
		margin-left: 0px;
		margin-right: 20px;
		float: right;
	}
	.site-nav .search-form {
		position: relative;
		display: block;
	}
}

You can see it in action (albeit in Hebrew) at https://smallbamafestival.co.il/.