如何从菜单汉堡图标中删除固定的 position

Question

How can I remove the fixed position from the hamburger icon so that I can position it relative to its parent div? Ive added this to a header in elementor but I cannot adjust the position by adding padding/margins etc to the header as it is fixed. I need to be able to add padding in the header using vw units so that the hamburger icon moves when the browser is resized. Ive tried changing some of the "position:fixed" css in here but not had any succcess achieving what I need yet.

 @import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One|Roboto+Mono:400,700&display=swap'); :root { --color-primary: #18181A; --color-secondary: #75757C; --color-dark: #364C62; --color-light: #F5F5F5; --font-family-primary: 'Roboto Mono', monospace; --font-family-secondary: 'Rubik Mono One', sans-serif; --td: 150ms; --te: cubic-bezier(0.215, 0.61, 0.355, 1); } html, body { height: 100%; } body { color: var(--color-dark); font-family: var(--font-family-primary); overflow-x: hidden; position: relative; } h1 { font-size: calc(1.5rem + 4vmin); font-weight: 700; margin-bottom: 2rem; } p { line-height: 1.4; } a { font-weight: 700; }.page-container { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; margin: 0 auto; max-width: 45rem; padding: 1rem; }.page-container > * + * { margin-top: 1.5rem; }.nav-main { align-items: center; display: flex; height: 100%; justify-content: center; left: -100%; position: fixed; transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2); width: 100%; }.nav-main::before, .nav-main::after { content: ''; background-color: var(--color-primary); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform calc(var(--td) * 2) var(--td) var(--te); width: 100%; z-index: -100; }.nav-main::before { top: 0; }.nav-main::after { bottom: 0; }.nav-main.menu__item { opacity: 0; transform: translateX(-1rem); transition: opacity var(--td) var(--te), transform var(--td) var(--te); } [id="main-navigation-toggle"] { opacity: 0; position: fixed; top: -100%; } [id="main-navigation-toggle"] ~ label { cursor: pointer; position: fixed; right: 1rem; top: 1rem; z-index: 100; } [id="main-navigation-toggle"] ~ label span { display: block; height: 2rem; padding: 0.5rem; position: relative; transition: transform calc(var(--td) * 3) var(--te); width: 2rem; } [id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after { background-color: var(--color-dark); bottom: 0; content: ''; height: 4px; left: 0; margin: auto; position: absolute; right: 0; transition: transform calc(var(--td) * 3) var(--te); top: 0; width: calc(100% - 1rem); } [id="main-navigation-toggle"] ~ label span::before { transform: rotate(0) translateY(-100%); } [id="main-navigation-toggle"] ~ label span::after { transform: rotate(0) translateY(100%); } [id="main-navigation-toggle"]:checked ~ label span { transform: rotate(1turn); } [id="main-navigation-toggle"]:checked ~ label span::before { transform: rotate(45deg); } [id="main-navigation-toggle"]:checked ~ label span::after { transform: rotate(-45deg); } [id="main-navigation-toggle"]:checked ~.nav-main { left: 0; transition: transform 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::before, [id="main-navigation-toggle"]:checked ~.nav-main::after { transform: translateX(0); transition-delay: 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::after { transition-delay: calc(var(--td) / 2); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item { opacity: 1; transform: translateX(0); transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(1) { transition-delay: calc(var(--td) * 2 * (1 * 0.25)); z-index: -1; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(2) { transition-delay: calc(var(--td) * 2 * (2 * 0.25)); z-index: -2; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(3) { transition-delay: calc(var(--td) * 2 * (3 * 0.25)); z-index: -3; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(4) { transition-delay: calc(var(--td) * 2 * (4 * 0.25)); z-index: -4; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(5) { transition-delay: calc(var(--td) * 2 * (5 * 0.25)); z-index: -5; }.menu { position: relative; text-align: center; z-index: 1; }.menu >.menu__item { font-family: var(--font-family-secondary); font-size: 10vmin; }.submenu { left: 0; opacity: 0; position: absolute; transform: translateY(-10%); top: 100%; width: 100%; visibility: hidden; z-index: 2; }.submenu.menu__item { font-family: var(--font-family-primary); font-size: 3.5vmin; width: 100%; }.submenu.menu__link { color: var(--color-secondary); text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary); }.submenu.menu__link::before, .submenu.menu__link::after { display: none; }.menu__item { display: block; position: relative; }.menu__item:hover.menu__link::before, .menu__item:hover.menu__link::after { animation: blink 1s var(--td) steps(1, end) forwards infinite; transform: translateX(calc(100% - 0.5rem)); transition-duration: calc(var(--td) * 3); }.menu__item:hover.menu__link::after { transition-delay: calc(var(--td) / 2); }.menu__item:hover.submenu { opacity: 1; transform: translateY(0); transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3); visibility: visible; }.menu__link { color: var(--color-dark); display: inline-block; font-weight: normal; overflow: hidden; padding: 0.5rem 1rem 0.125rem; position: relative; text-decoration: none; transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te); z-index: 1; }.menu__link::before, .menu__link::after { content: ''; background-color: var(--color-light); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform 0s var(--te); width: 100%; z-index: -1; }.menu__link::before { top: 0; }.menu__link::after { bottom: 0; }.menu:not(:focus-within):not(:hover).menu__item.menu__link { opacity: 1; transform: translate(0, 0); }.menu__item { --pull: 30%; }.menu__item.menu__link { opacity: 0.25; transition-duration: calc(var(--td) * 3); transform: translate(0, calc(var(--pull) * -1)); }.menu__item.submenu.menu__link { opacity: 1; }.menu__item:hover >.menu__link { color: var(--color-secondary); opacity: 1; transform: translate(0, 0); }.menu__item:hover >.menu__link:hover { color: var(--color-light); transition-delay: 0s; }.menu__item:hover ~.menu__item >.menu__link { transition-duration: calc(var(--td) * 3); transform: translate(0, var(--pull)); } @keyframes blink { 50%, 100% { opacity: 0; } }

 <input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" /> <label for="main-navigation-toggle"> <span></span> </label> <nav id="main-navigation" class="nav-main"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#0">Home</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">About</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Clients</a> <ul class="submenu"> <li class="menu__item"> <a class="menu__link" href="#0">Burger King</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Southwest Airlines</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Levi Strauss</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#0">Services</a> <ul class="submenu"> <li class="menu__item"> <a class="menu__link" href="#0">Print Design</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Web Design</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Mobile App Development</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#0">Contact</a> </li> </ul> </nav> <main class="page-container"> <h1>Fork This Nav Challenge</h1> <p>Click the toggle to open the menu and see the magic.</p> </main>

Answer 1

Is this what you're looking for? I added a wrapper around both the menu and the menu toggle (which allows you to maintain your relative CSS selectors to show/hide the navigation). The container is position:relative and I added a right margin to demonstrate your scenario above. I also changed the toggle label to position:absolute so it would follow the container.

 @import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One|Roboto+Mono:400,700&display=swap'); :root { --color-primary: #18181A; --color-secondary: #75757C; --color-dark: #364C62; --color-light: #F5F5F5; --font-family-primary: 'Roboto Mono', monospace; --font-family-secondary: 'Rubik Mono One', sans-serif; --td: 150ms; --te: cubic-bezier(0.215, 0.61, 0.355, 1); } html, body { height: 100%; } body { color: var(--color-dark); font-family: var(--font-family-primary); overflow-x: hidden; position: relative; } h1 { font-size: calc(1.5rem + 4vmin); font-weight: 700; margin-bottom: 2rem; } p { line-height: 1.4; } a { font-weight: 700; }.page-container { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; margin: 0 auto; max-width: 45rem; padding: 1rem; }.page-container > * + * { margin-top: 1.5rem; }.navigation-container { position: relative; margin-right: 5rem; }.nav-main { align-items: center; display: flex; height: 100%; justify-content: center; left: -100%; position: fixed; transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2); width: 100%; }.nav-main::before, .nav-main::after { content: ''; background-color: var(--color-primary); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform calc(var(--td) * 2) var(--td) var(--te); width: 100%; z-index: -100; }.nav-main::before { top: 0; }.nav-main::after { bottom: 0; }.nav-main.menu__item { opacity: 0; transform: translateX(-1rem); transition: opacity var(--td) var(--te), transform var(--td) var(--te); } [id="main-navigation-toggle"] { opacity: 0; position: fixed; top: -100%; } [id="main-navigation-toggle"] ~ label { cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 100; } [id="main-navigation-toggle"] ~ label span { display: block; height: 2rem; padding: 0.5rem; position: relative; transition: transform calc(var(--td) * 3) var(--te); width: 2rem; } [id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after { background-color: var(--color-dark); bottom: 0; content: ''; height: 4px; left: 0; margin: auto; position: absolute; right: 0; transition: transform calc(var(--td) * 3) var(--te); top: 0; width: calc(100% - 1rem); } [id="main-navigation-toggle"] ~ label span::before { transform: rotate(0) translateY(-100%); } [id="main-navigation-toggle"] ~ label span::after { transform: rotate(0) translateY(100%); } [id="main-navigation-toggle"]:checked ~ label span { transform: rotate(1turn); } [id="main-navigation-toggle"]:checked ~ label span::before { transform: rotate(45deg); } [id="main-navigation-toggle"]:checked ~ label span::after { transform: rotate(-45deg); } [id="main-navigation-toggle"]:checked ~.nav-main { left: 0; transition: transform 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::before, [id="main-navigation-toggle"]:checked ~.nav-main::after { transform: translateX(0); transition-delay: 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::after { transition-delay: calc(var(--td) / 2); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item { opacity: 1; transform: translateX(0); transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(1) { transition-delay: calc(var(--td) * 2 * (1 * 0.25)); z-index: -1; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(2) { transition-delay: calc(var(--td) * 2 * (2 * 0.25)); z-index: -2; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(3) { transition-delay: calc(var(--td) * 2 * (3 * 0.25)); z-index: -3; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(4) { transition-delay: calc(var(--td) * 2 * (4 * 0.25)); z-index: -4; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(5) { transition-delay: calc(var(--td) * 2 * (5 * 0.25)); z-index: -5; }.menu { position: relative; text-align: center; z-index: 1; }.menu >.menu__item { font-family: var(--font-family-secondary); font-size: 10vmin; }.submenu { left: 0; opacity: 0; position: absolute; transform: translateY(-10%); top: 100%; width: 100%; visibility: hidden; z-index: 2; }.submenu.menu__item { font-family: var(--font-family-primary); font-size: 3.5vmin; width: 100%; }.submenu.menu__link { color: var(--color-secondary); text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary); }.submenu.menu__link::before, .submenu.menu__link::after { display: none; }.menu__item { display: block; position: relative; }.menu__item:hover.menu__link::before, .menu__item:hover.menu__link::after { animation: blink 1s var(--td) steps(1, end) forwards infinite; transform: translateX(calc(100% - 0.5rem)); transition-duration: calc(var(--td) * 3); }.menu__item:hover.menu__link::after { transition-delay: calc(var(--td) / 2); }.menu__item:hover.submenu { opacity: 1; transform: translateY(0); transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3); visibility: visible; }.menu__link { color: var(--color-dark); display: inline-block; font-weight: normal; overflow: hidden; padding: 0.5rem 1rem 0.125rem; position: relative; text-decoration: none; transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te); z-index: 1; }.menu__link::before, .menu__link::after { content: ''; background-color: var(--color-light); height: 50%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform 0s var(--te); width: 100%; z-index: -1; }.menu__link::before { top: 0; }.menu__link::after { bottom: 0; }.menu:not(:focus-within):not(:hover).menu__item.menu__link { opacity: 1; transform: translate(0, 0); }.menu__item { --pull: 30%; }.menu__item.menu__link { opacity: 0.25; transition-duration: calc(var(--td) * 3); transform: translate(0, calc(var(--pull) * -1)); }.menu__item.submenu.menu__link { opacity: 1; }.menu__item:hover >.menu__link { color: var(--color-secondary); opacity: 1; transform: translate(0, 0); }.menu__item:hover >.menu__link:hover { color: var(--color-light); transition-delay: 0s; }.menu__item:hover ~.menu__item >.menu__link { transition-duration: calc(var(--td) * 3); transform: translate(0, var(--pull)); } @keyframes blink { 50%, 100% { opacity: 0; } }

 <div class="navigation-container"> <input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" /> <label for="main-navigation-toggle"> <span></span> </label> <nav id="main-navigation" class="nav-main"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#0">Home</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">About</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Clients</a> <ul class="submenu"> <li class="menu__item"> <a class="menu__link" href="#0">Burger King</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Southwest Airlines</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Levi Strauss</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#0">Services</a> <ul class="submenu"> <li class="menu__item"> <a class="menu__link" href="#0">Print Design</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Web Design</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Mobile App Development</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#0">Contact</a> </li> </ul> </nav> </div> <main class="page-container"> <h1>Fork This Nav Challenge</h1> <p>Click the toggle to open the menu and see the magic.</p> </main>