My Product Landing Page - Any Advice on Z-Index?

Code Feedback
1

It’s a little out of the box, more in line with my personal interests. My product landing page is set to sell the weapons set from Gambit in Destiny 2. I’d love feedback, but I’d also love some advice, if anyone were so inclined.

The z-index on my drop buttons: I can’t change it without messing up the drop down capabilities, but it scrolls over top of my navbar. It doesn’t look very nice to say the least. Any input would be greatly appreciated. Thanks!

Link - https://codepen.io/SpaceCatInD/pen/oRVKZN

EDIT: @RohanKumarr solved my Z-Index issue, thanks again!

2 Likes
3

Just give z-index 9 to your header! that will fix overlap!
Like this: just in case you are wondering what i am saying

#header {
  width: 98vw;
  margin: auto;
  position: fixed;
  z-index:9;
}

nice website design by the way really love the green colored layout and details in it good luck! :slight_smile:

1 Like
4

That was so simple and it worked! Thank you so much. For the help and for the compliment. Have a great one! :grin:

1 Like
5

One more thing.
Give your header negative margin-top to put it to the topmost position.
It doesn’t look good to see background content on top of Header while scrolling.

#header {
  width: 98vw;
  margin: -13px auto;
  position: fixed;
  z-index: 9;
}
1 Like
6

That is better. Thank you.

1 Like