Custom hamburger/overlay menu on desktop: z-index issues

https://cuboid-guppy-5ab6.squarespace.com/
Site password: heather

Hi! I've used some custom CSS to have a hamburger menu on desktop view, but I'm having an issue:

When the overlay menu is open on desktop, my menu links are aligned at the top and my first item is inline with the "x" to close the menu. The header (logo and hamburger icons) seems to be "in front" of everything else, which means the user isn't able to click on my first menu item. Is there a way to bring my link items all the way to the front so that the first item can be clicked? I was having trouble achieving this without losing the "x" icon all together.

Additionally, when the menu is open I'm still able to scroll the page in the background and the header (logo and hamburger icons) scroll out of view. I'd like to disable all scrolling when the menu is open, so no scroll on the page behind OR on the overlay menu. Is this possible?

Thanks in advance!

Hello @heatherjacksonio,

Please update your CSS with the following:

.header-menu-nav-wrapper { margin-top: 48px; }

On 7/24/2024 at 1:53 AM, LoftyDevs-Website-Designer said:

Hello @heatherjacksonio,

Please update your CSS with the following:

.header-menu-nav-wrapper { margin-top: 48px; }

Hi! Thank you so much for responding. I actually was hoping to find a solution that wouldn't shift my menu items down, since we like the look of the items being aligned at the top as they are. Is it possible to leave everything aligned as is, but allow for the first item to still work as a link?

On 8/6/2024 at 8:25 PM, heatherjacksonio said:

Hi! Thank you so much for responding. I actually was hoping to find a solution that wouldn't shift my menu items down, since we like the look of the items being aligned at the top as they are. Is it possible to leave everything aligned as is, but allow for the first item to still work as a link?

If doing this, burger menu X icon will disappear (or non-clickable) (or you need to move burger to another position)

add z-index: 9999; to your current code

move burger with a code like this

@media screen and (min-width:768px) {
body.header--menu-open .header-burger {
    position: fixed;
    left: 40%;
}
}