Please help me to fix this CSS

Question

Hello coders,
I'm trying to help my friend by building a restaurant site for her. So far, I took design from her and trying to implement it in code. I was able to code hamburger with pure css. When I click on the hamburger icon, I want the li's to be displayed on the center of the page with a background of black so that the main image gets hidden. Right now, when you click on hamburger, li's are displayed towards left.
Could you help me to figure out that portion of the code?
Link - https://code.sololearn.com/W0A118A0a53a
Thank you so much,
Renu.

Answer 1

The following change works like you describe. The image gets hidden by the black hamburger menu items but will appear if there is space below the items. Is that enough or do you want the image completely hidden if any menu items appear?

This is the new CSS snippet:
.header .menu a {
text-align: center;
background-color: black;
}
/* make sure menu overlaps the home-content */
.header .menu {
position:relative;
z-index: 3;/*must be larger than home-content's z-index */
}

This is a mix of my new snippet in the place I inserted:

@media(max-width:1068px) {
.logo {
top:10px;
left: 40px;
font-size: 1.5rem;
}
.header .menu a {
text-align: center;
background-color: black;
}
/* make sure menu overlaps the home-content */
.header .menu {
position:relative;
z-index: 3;/*must be larger than home-content's z-index */
}
}

The position relative and z-index: 3 is important when the viewport is small enough that the white text and the menu items overlap each other.

Answer 2

Thank u so much Josh