Cannot solve: Your #navbar element should always be at the top of the viewport

HTML-CSS
1

<!doctype html>

My Portfolio

Welcome on my portfolio

Hi, this is my portfolio made from scratch. Welcome.

Projects

One of my projects was to make a happy penguin making his visitors happy.

In any way can I solve the issue; I have read through the treads. It doesn't help. Please, help. Thnx!

.header {
display: flex;
justify-content: space-around;
background-color: red;
width: 100%;
margin: 0;
padding: 0;
position: fixed;
top: 0;
}

navbar {
position: fixed;
top: 0;
width: 100%;
margin: none;
padding: 0;
}

ul {
display: flex;
list-style-type: none;
font-size: 20px;

}

li {
padding: 0 12 0 0;
position: sticky;
}

a {
color: white;
}

a:link {
text-decoration: none;
}

a:hover {
color: blue;
}

body {
display: flex;
width: 100%;
height: 100%;
background-color: gray;
align-items: center;
margin-top:
}

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
body {
background: olive;
}
}

2

This is targeting the navbar element (which doesn’t exist in HTML). Don’t you want to target the element that has the id of navbar?

Also, most browsers add default margins on the body, which would keep your navbar from touching the very top of the viewport, so you might want to set those to 0.

3

Hi bbsmooth, thank you for extra quick response. Above I wanted to paste html code as well as css code. I have seen it was not quite so. But here goes my html code and it does have id of navbar:

<!doctype html>

My Portfolio

Welcome on my portfolio

Hi, this is my portfolio made from scratch. Welcome.

Projects

One of my projects was to make a happy penguin making his visitors happy.

4

Hi bbsmooth, but there is id of navbar in the header of html:

5

Oh, ye, thank you. I guess that would do it - margin in the body:
body {
display: flex;
width: 100%;
height: 100%;
background-color: gray;
align-items: center;
margin: 0 0 0 25px;
}

6

The id on the element is not the issue here. The issue is that you are not targeting that id in your CSS.

This is targeting the element navbar, not an element with the id of navbar.

7

I just moved my id class one level up. Thank you! I finished this challenge.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.