Hello!

I'm a little new to hamburger menus and wanted to do one only with CSS, so I adapted using Brad Traversy's "pure CSS hamburger menu."

I want the menu to align right, but I'm not sure how to do so. I tried changing "left: 0" to "right: 0" and added "float: right" elements, but I'm still stuck. Any help would be appreciated. Thank you!

:root {

--overlay-color: rgba(0, 0, 0, 0.75);

--menu-speed: 0.75s; }

.menu-wrap {

line-height: 1.4;

position: fixed;

top: 0;

left: 0;

z-index: 1; }

.menu-wrap .toggler {

position: absolute;

top: 0;

left: 0;

z-index: 2;

width: 50px;

height: 50px;

opacity: 0;

}

.menu-wrap .hamburger {

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 60px;

height: 60px;

padding: 1rem;

background: var(--primary-color);

display: flex;

align-items: center;

justify-content: center;

}

/* Hamburger Line */

.menu-wrap .hamburger > div {

position: relative;

flex: none;

width: 100%;

height: 2px;

background: #fff;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.4s ease;

}

/* Hamburger Lines - Top & Bottom */

.menu-wrap .hamburger > div::before,

.menu-wrap .hamburger > div::after {

content: '';

position: absolute;

z-index: 1;

top: -10px;

width: 100%;

height: 2px;

background: inherit;

}

/* Moves Line Down */

.menu-wrap .hamburger > div::after {

top: 10px;

}

/* Toggler Animation */

.menu-wrap .toggler:checked + .hamburger > div {

transform: rotate(135deg);

}

/* Turns Lines Into X */

.menu-wrap .toggler:checked + .hamburger > div:before,

.menu-wrap .toggler:checked + .hamburger > div:after {

top: 0;

transform: rotate(90deg);

}

/* Rotate On Hover When Checked */

.menu-wrap .toggler:checked:hover + .hamburger > div {

transform: rotate(225deg);

}

/* Show Menu */

.menu-wrap .toggler:checked ~ .nav {

visibility: visible; }

.menu-wrap .toggler:checked ~ .nav > div {

opacity: 1; /* menu will show if toggled */

transition-duration: var(--menu-speed); }

.menu-wrap .toggler:checked ~ .nav > div > div {

opacity: 1;

transition: opacity 0.4s ease 0.4s; }

.menu-wrap .nav {

position: fixed;

top: 0;

margin-left: auto;

width: 100%;

height: 100%;

visibility: hidden;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.menu-wrap .nav > div {

background: var(--overlay-color);

width: 200vw;

height: 200vw;

display: flex;

flex: none;

align-items: center;

justify-content: center;

opacity: 0;

transition: all 0.4s ease;

}

.menu-wrap .menu > div > div {

text-align: center;

max-width: 90vw;

max-height: 100vh;

opacity: 0;

transition: opacity 0.4s ease;

}

.menu-wrap .nav > div > div > ul > li {

list-style: none;

color: #fff;

font-size: 1.5rem; }

.menu-wrap .nav > div > div > ul > li > a {

color: inherit;

text-decoration: none;

transition: color 0.4s ease; }

}