[Resolved] Mobile menu under logo

Hi Paul

Thanks for your support, it’s most appreciated.

You can try the following at Customize > Additional CSS:

@media (max-width: 786px) {

	.site-header {
		padding-bottom: 70px;
	}

	.site-header .site-branding {
		display: block;
		float: none;
		max-width: none;
		padding-right: 0;
		width: 100%;
	}

	.responsive-menu .menu-toggle {
		margin-right: -11.5px;
		right: 50%;
		top: 50px;
	}

	.site-header .site-branding a {
		text-align: center;
	}

	.responsive-menu .main-navigation.toggled {
		margin-top: 50px;
		margin-bottom: 0;
	}
}

There are several elements that have to be readjusted so this might not work well without further changes.

Hi Paul

Please, locate the following rule:

.responsive-menu .main-navigation.toggled {
	margin-top: 50px;
	margin-bottom: 0;
}

Change it to:

.responsive-menu .main-navigation.toggled {
	margin-top: 50px !important;
	margin-bottom: 0;
}

We’re just adding !important after the 50px value for this rule. You can adjust as required. Let me know how it goes. Thanks 🙂

Super, glad to hear that helped. If questions arise in the future, feel free to email [email protected]. Cheers for now 🙂