Support » Theme: Twenty Twenty-One » Disable hamburger on mobile

  • Resolved dubs

    (@dubs)


    How can I disable the hamburger mobile menu so that the default desktop text menu is displayed on mobile?

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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

    Thread Starter dubs

    (@dubs)

    Excellent. Thank you @domainsupport.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.