I am unable to get the header to work properly

1

This is my very last issue:

“The navbar should always be at the top of the viewport.”

NOTE: I’ve tried every answer I found on google, and freecodecamp. Unfortunately nothing has worked. This is my last resort, as I feel it’s essential to be able to look up the answers on my own. Thank you contributor.

The content below the header is overriding the header. I know this has to do with the flow being disrupted, but I forgot my way around that. :confused:

this is my css:

#header {
display: flex;
flex-direction: row;
justify-content: center;
position: fixed;
width: 100%;
}

#header #header-img {
width: 80px;
}

#header #nav-bar {
display: flex;
flex-direction: column;
justify-content: center;
}

#header #nav-bar a {
text-decoration: none;
text-transform: uppercase;
color: black;
padding: 4px;
transition: .4s;
}

a:hover {
color: white !important;
background: black;
}

#content {
}

#video {
display: flex;
justify-content: center;
margin: 20px 0px;
}

@media (max-width: 700px) {
a {
color: red !important;
}
}

2

Hello!

If this is for one of the Responsive Web Design projects, it is very helpful to post the link to your CodePen. That allows us to view your entire code and facilitates the debugging process. :slight_smile:

3

SAME PERSON…
Here is the code pen link! It is for the product landing page. Thanks for your help.