Header Breakpoint

Hi @hirschan,

To change the hamburger menu breakpoint, you can add the following CSS code inside Customizer > Additional CSS. In the first line, change the 1023px value with the value you want. If you want the menu to always be the hamburger menu, remove the first line @media only screen and (max-width: 1023px) { and the last line } .

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

	.tw-header-break-tablet.tw-header-padding-small {
		--header--padding: 24px;
	}
	
	.tw-header-break-tablet .menu-button-container {
		display: flex;
		padding-right: calc(var(--site--padding) - 20px);
	}

	.tw-header-break-tablet .has-logo .menu-button-container {
		padding-top: calc(var(--header--padding) + (var(--logo--height) - (25px + var(--button--padding-vertical))) / 2);
	}

	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
		width: 100%;
	}	

	.tw-header-break-tablet .primary-navigation {
		position: absolute;
		top: var(--global--admin-bar--height);
	}
	
	.tw-header-break-tablet.primary-navigation-open .primary-navigation {
		width: 100%;
		position: fixed;
		z-index: 2;
	}

	.tw-header-break-tablet .primary-navigation > .primary-menu-container {
		display: block;
		position: fixed;		
		visibility: hidden;	
		opacity: 0;
		top: 0;
		height: 100vh;
		z-index: 499;
		overflow-x: hidden;
		overflow-y: auto;			
		transform: translateY(var(--global--spacing-vertical));
		padding: calc(6 * var(--global--spacing-unit)) var(--site--padding) var(--global--spacing-horizontal);
		background-color: var(--header--color-background, var(--global--color-background));
		margin-left: 0;
	}

	.tw-header-break-tablet .site-header.has-logo .primary-menu-container {
		padding-top: calc(70px + var(--logo--height));
	}

	.tw-header-break-tablet.primary-navigation-open .primary-navigation > .primary-menu-container {
		position: absolute;
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	
	.tw-header-break-tablet .primary-navigation .menu-wrapper {
		width: 100%;
		max-width: 100%;
		padding-bottom: 120px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper:not(:last-child) {
		padding-bottom: 20px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper li {
		display: block;
		position: relative;
		width: 100%;
	}

	.tw-header-break-tablet .primary-navigation a {
		font-size: var(--primary-nav--font-size-mobile);
	}

	.tw-header-break-tablet .site-header .primary-navigation .primary-menu-container .menu-wrapper a {
		padding-left: 0;
		padding-right: 0;
	}

	.tw-header-break-tablet ul.header-actions {
		margin-left: 0;		
		padding-bottom: 120px;
		justify-content: flex-start;
	}

	.tw-header-break-tablet .header-actions .social-item {
		margin-left: calc(0px - var(--primary-nav--padding));
	}

	.tw-header-break-tablet .header-actions .social-item + .social-item {
		margin-left: 0;
	}
}

To hide “Menu” next to the hamburger, add the following CSS:

.menu-button-container .button.button .dropdown-icon {
	text-indent: -999em;
	overflow: hidden;
}
 
.menu-button-container .button.button .dropdown-icon svg.svg-icon {
	margin-left: 0;
}

I hope the above is useful to you.

If you enjoy Twentig, please leave us a review. We’d really appreciate it ??

Hi, sorry to revive an old thread, but I’m wanting to set the menu to always be the hamburger menu, and adding this to the styles didn’t work for me as pasted below. Did you change the way it works, or maybe I’m just doing something wrong?

Thanks again for all your hard work.

	.tw-header-break-tablet.tw-header-padding-small {
		--header--padding: 24px;
	}
	
	.tw-header-break-tablet .menu-button-container {
		display: flex;
		padding-right: calc(var(--site--padding) - 20px);
	}

	.tw-header-break-tablet .has-logo .menu-button-container {
		padding-top: calc(var(--header--padding) + (var(--logo--height) - (25px + var(--button--padding-vertical))) / 2);
	}

	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
		width: 100%;
	}	

	.tw-header-break-tablet .primary-navigation {
		position: absolute;
		top: var(--global--admin-bar--height);
	}
	
	.tw-header-break-tablet.primary-navigation-open .primary-navigation {
		width: 100%;
		position: fixed;
		z-index: 2;
	}

	.tw-header-break-tablet .primary-navigation > .primary-menu-container {
		display: block;
		position: fixed;		
		visibility: hidden;	
		opacity: 0;
		top: 0;
		height: 100vh;
		z-index: 499;
		overflow-x: hidden;
		overflow-y: auto;			
		transform: translateY(var(--global--spacing-vertical));
		padding: calc(6 * var(--global--spacing-unit)) var(--site--padding) var(--global--spacing-horizontal);
		background-color: var(--header--color-background, var(--global--color-background));
		margin-left: 0;
	}

	.tw-header-break-tablet .site-header.has-logo .primary-menu-container {
		padding-top: calc(70px + var(--logo--height));
	}

	.tw-header-break-tablet.primary-navigation-open .primary-navigation > .primary-menu-container {
		position: absolute;
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	
	.tw-header-break-tablet .primary-navigation .menu-wrapper {
		width: 100%;
		max-width: 100%;
		padding-bottom: 120px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper:not(:last-child) {
		padding-bottom: 20px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper li {
		display: block;
		position: relative;
		width: 100%;
	}

	.tw-header-break-tablet .primary-navigation a {
		font-size: var(--primary-nav--font-size-mobile);
	}

	.tw-header-break-tablet .site-header .primary-navigation .primary-menu-container .menu-wrapper a {
		padding-left: 0;
		padding-right: 0;
	}

	.tw-header-break-tablet ul.header-actions {
		margin-left: 0;		
		padding-bottom: 120px;
		justify-content: flex-start;
	}

	.tw-header-break-tablet .header-actions .social-item {
		margin-left: calc(0px - var(--primary-nav--padding));
	}

	.tw-header-break-tablet .header-actions .social-item + .social-item {
		margin-left: 0;
	}

• This reply was modified 3 years, 9 months ago by texjer.