Yes, I have already researched this and the responses are not working at all. Here is my code. Why is it not working?? It’s like one thing overrides another and then it becomes this maze of “what do I need to change?”. I have tried all of the CSS overrides I can think of…I just want to resort to bootstrap lol. Also, I cannot move the nav-bar to the far right of the page…
We’ll need to see your CSS as well in order to make suggestions. Generally, to keep an element at the top of the view port at all times you would use fixed positioning and set it’s top to 0. If this is for the product landing page certification then I think you’ll need to be sure you place the fixed positioning directly on the <nav>, not just the <header> (and you can do both, but it at least needs to be on the <nav>).
Yes, you’ll want at least this on the <nav>. The tests are looking for these properties specifically on the <nav> so that’s where they need to be. You can also put fixed positioning on the <header> if you need to.
When you put fixed positioning on something then the natural positioning of the element changes and it will overlap other content. You’ll need to push the other content down a little so it doesn’t go underneath the fixed element.
Did what? We can’t guess what you did, you need to show us your code. If the HTML has remained the same then you don’t need to paste that again. But you’ll need to give us your updated CSS. And not just the CSS for the <nav>, give us all of your CSS so we can recreate the page on our end to see what you are seeing.
No need to apologize. This stuff is confusing for everyone.
Take a look at the above CSS. You have set the position to fixed, which is one thing you needed to do. But you haven’t set the top to 0. Yes, you have done it for the header, but the tests are looking for it on the nav, so you need to set it for the nav as well.
Let me be clear, what you did originally is just fine, the header is staying at the top and thus the nav menu is staying at the top because it is inside the header. But the tests aren’t looking at the header, they are looking at the nav, and thus to pass the tests you need the position and top to be set on the nav.
UPDATE: I just discovered that you can actually get away with not having the positioning/top on the nav if you already have it on the header, but you’ll need to do a few things. First, you can’t have any top padding on the header, because that will push the nav down away from the top. The nav must be at the very top of the page (but it can have top padding if needed). Second, you’ve got the a company logo that is placing itself above the nav and thus pushing it down as well, so you’ll need to take care of that too.
Just remember that when you use the browser’s dev tools inspector to look at the nav, the top of the nav must always be touching the top of the view port.
Thank you for your assistance. I also did that just now, but it seems that the links that I moved to the right are not on the same line. I can change that by making it inline or block?
