Title: Header Breakpoint Last modified: January 13, 2021 --- # Header Breakpoint * Resolved [Hirschan](https://wordpress.org/support/users/hirschan/) * (@hirschan) * [5 years, 4 months ago](https://wordpress.org/support/topic/header-breakpoint/) * What should I use for CSS code to change the width when the menu is to be changed to the hamburger menu? * What should I use for CSS code if I want the menu to always be hamburger menu regardless of screen size? * How do I delete the title “Menu” next to the hamburger symbol? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-breakpoint%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 2 replies - 1 through 2 (of 2 total) * Plugin Author [Twentig](https://wordpress.org/support/users/twentig/) * (@twentig) * [5 years, 4 months ago](https://wordpress.org/support/topic/header-breakpoint/#post-13914494) * Hi [@hirschan](https://wordpress.org/support/users/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](https://wordpress.org/support/plugin/twentig/reviews/). We’d really appreciate it 🙂 * [texjer](https://wordpress.org/support/users/texjer/) * (@texjer) * [4 years, 11 months ago](https://wordpress.org/support/topic/header-breakpoint/#post-14567787) * 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 4 years, 11 months ago by [texjer](https://wordpress.org/support/users/texjer/). Viewing 2 replies - 1 through 2 (of 2 total) The topic ‘Header Breakpoint’ is closed to new replies. * ![](https://ps.w.org/twentig/assets/icon.svg?rev=2569439) * [Twentig Supercharged Block Editor – Blocks, Patterns, Starter Sites, Portfolio](https://wordpress.org/plugins/twentig/) * [Frequently Asked Questions](https://wordpress.org/plugins/twentig/#faq) * [Support Threads](https://wordpress.org/support/plugin/twentig/) * [Active Topics](https://wordpress.org/support/plugin/twentig/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/twentig/unresolved/) * [Reviews](https://wordpress.org/support/plugin/twentig/reviews/) * 2 replies * 3 participants * Last reply from: [texjer](https://wordpress.org/support/users/texjer/) * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/header-breakpoint/#post-14567787) * Status: resolved