Disable hamburger on mobile

Hi,

Interesting … most people want the hamburger on desktop 🙂

You should be able to do what you want with CSS. This will get you some of the way there, try adding this to “Customizer – Additional CSS” …

@media only screen and (max-width: 481px) {

	.admin-bar .primary-navigation {
		top: initial;
	}

	.primary-navigation {
		position: relative;
		margin-left: auto;
	}

	.menu-button-container {
		display: none;
	}

	.admin-bar .primary-navigation > .primary-menu-container {
		top: initial;
	}

	.primary-navigation > .primary-menu-container {
		visibility: visible;
		opacity: 1;
		position: relative;
		padding: 0;
		background-color: transparent;
		overflow: initial;
		transform: none;
		z-index: auto;
		border: none;
		height: auto;
	}

	.primary-navigation > div > .menu-wrapper {
		padding-bottom: 0;
	}

	.primary-navigation .primary-menu-container > ul > .menu-item {
		display: flex;
	}

	.primary-navigation > div > .menu-wrapper li {
		margin: 0;
		width: inherit;
	}

	.primary-navigation .primary-menu-container > ul > .menu-item > a {
		padding-left: var(--primary-nav--padding);
		padding-right: var(--primary-nav--padding);
	}

}

It’s by no means finished but you’ll see it’s getting there …

Oliver

To follow up with this thread, there is now an option “Customizer – Nav Options – Desktop Nav on Mobile” in Options for Twenty Twenty-One plugin which also allows the drop down menus to function as normal on smaller screens.

Oliver

Apologies, yes, our mistake!

Oliver