Changing color for .nav

1

Hello,
I used 100vh for the 3 main components on my project. My issue is that I don’t want my nav to be transparent, but to have a opaque white color. I tried changing the color of the header but that didn’t work.
How do I proceed ?

Stay healthy and thank you in advance :slight_smile:

2

Why do you need a 100vh on your nav? You would not be able to click on anything on the actual page.
You should add height(like 120px or about so) on your nav and background-color as well. And you should be fine.

3

Your .nav class was extending down to the bottom of the page. I believe its because of the 100vh like @vasylk said. Setting it to 80px puts it in line evenly with the rest of the .nav stuff. But that also leaves anything that is going to be in the header subject to cover the whole page. Just keep that in mind, 100vh is 100% of the screens real estate.

To make the navbar an opaque white color I just used rgba(255,255,255,0.8)

.nav {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content:space-between;
  align-items: top; 
  border-bottom:1px solid rgba(0,0,0,.075);
  background-color: rgba(255,255,255,0.8);
  height: 80px;
  z-index: 1000;
}

Love element decks btw, first board I ever had was an element haha. Site looks good btw!

2 Likes
4

I never had 100vh on my nav but i had it on my header. I changed the header height from 100 vh to 120 px but for some reason, the video disappears. What am I doing wrong?

5

You’re a god! It worked! Thank you very much. Yea, I also had one when i was a teen and tbh im planning to buy some decks where ill probably hang a couple as decoration and the other to skate for fun. :smiley:

1 Like
6

Oh yea sorry I forgot to specify I was talking about the header haha. But I’m glad it works good now.

Yea I haven’t skated in a long while, I mostly long boarded tho and did some sliding. I’ve been contemplating getting back into it tho!

7

Yea, it works so well.
Just do it or you’ll never do it :wink:

1 Like