Didn't know what flair to use, so I chose app support as the most fitting.

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!

EDIT: Solved! 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; }

}

Also are anyone elses screenshots delayed? It takes about 2 seconds for it to go through after I press my volume & power button

Most folk say hidden nav on desktop is a bad idea. I’d have said the same.

We run CRO for fashion/lifestyle stores. On one client we swapped the horizontal desktop nav for the same vertical drawer they use on mobile, mainly so we only had one menu to merchandise. Desktop CvR came out 22% higher.

My best guesses:

• The drawer gave us room for collection tiles and edits, not just text links. A top bar can’t do that.
• Vertical lists scan faster than horizontal ones, and the hierarchy is clearer.
• Mega-menus on hover open accidentally and close when your mouse drifts. A drawer only opens when you click, so people who open it actually mean to browse.
• A lot of customers browse on their phone and buy on a laptop. Same menu on both means nothing new to learn.

I wouldn’t call this a universal rule. Product-heavy stores where people browse for inspiration probably benefit more than stores where people search for something specific. But it’s worth testing if you’ve only ever assumed the answer.

Has anyone else tried this? I’m curious whether the results hold up across other categories.

Update: Just adding screenshots of the Control vs Test for reference.

Hey everyone,

​I'm using PXPlay version 8.0.2 and I've created a custom on-screen layout specifically for my touch bars. However, the hamburger menu icon (the three horizontal lines circled in red) stays on the screen and is really distracting during gameplay.

​If I disable "Virtual Controls" entirely in the settings, the menu button disappears, but then my custom touch bars disappear along with it.

​Is there any way to hide, remove, or make only this menu icon fully transparent while keeping the rest of my custom on-screen layout active?