I am really missing something here. I create a div below my fixed nav-bar, but the text either is hidden behind the nav-bar, or shows up above it, depending on what I try.
I’ve tried so many possible solutions that my code is becoming a mess.
Here’s my pen : https://codepen.io/J-DeJong/pen/KKzZzOr?editors=1100
Hi @misokrazy, which project are you working on? I just took a look at your pen and it contains some errors in it that would prevent the display from being accurate.
You could start by removing the <image> element because that is not an HTML element. Then apply your styles, such as display: flex to the nav-bar element in the CSS.
Speaking of nav-bar, why do you have 2 <nav> elements in your header?
Without the goal in mind, this is all I can come up with right now. I could rework the pen, but I wouldn’t know if it is what you’re after…
Hi,
Because you gave the navbar a fixed position it’s position is out of the flow so the space it takes wont be added to main part. You can give your div a margin-top so it shows under the navbar.
And " < body>" is the tag for all the page content, codepen automatically puts it so you don’t need to, use “< main>” for the content instead.
Hope it helps.
Yeah, all html goes inside body, so it would be like:
<body>
<nav></nav>
<div></div>
</body>
Once you’ve done that, understand that the fixed position turns the element into a ghost, out of the flow. So your div with the text is being hidden underneath it. One way to solve that is to put padding–I used 300px–on the div. That will give space for the fixed nav to display.
I’m working on the Product Landing Page for Interactive Web Design.
User story #2 requires that the element is included in the header.
Concerning the elements; which is the problem/extra, the
nav id=“nav-bar” style=“flex” class=“container”
or
nav class=“sitenav”?
I’ve tried adding a margin to
and it did not help… just scrambled the format.
I thought you’d be working on that project - the beginnings were looking familiar.
You only need one <nav> element. The project user stories say that you need one <header> with the ID header. At least one <img> element with the ID header-img. Then, you need one <nav> element with the ID of nav-bar. Inside of the <nav> element should be at least 3 elements, each with the class of .nav-link. They don’t have to be unordered list items <ul><li></li></ul>. You just have to have three elements.
So to get you started the skeleton would look like:
<header><img src="" id="header-img"><nav id="nav-bar"><a href="#" class="nav-link">#</a><a href="#" class="nav-link">#</a><a href="#" class="nav-link">#</a></nav></header>
As some mentioned, you also have the fixed positioning to deal with. When you set an element’s position, you must be careful not to disrupt the position(s) of other elements in the flow of the markup.
See this guide on MDN for more information. But, you really don’t need to position elements like headers or other block-level elements because they will set themselves in the order they were placed - one after the other. The exception is if you set the position or use flexbox or if you have a definite need to position them because of media queries or whatnot.
One more thing of note, I don’t know if you’re solely using CodePen to code this project, but you might want to do it offline first. Then, once you’re done upload the content within your <body> tag into CodePen. I don’t know about you, but I get confused with the split screen like that. Also, don’t forget to include the FCC test suite in your local development environment. It works just fine.
I hope this helps.
Thank you so much! I’ve made those changes and saved your markup for future reference.
I’m brand new to this, and it gets very confusing sometimes.
Thank you! Is there a reason that I should change from my unordered list to your format?
Does one function better than the other?
You are welcome, start is always the hardest part , it’ll get better! I’d recommend following beginners html and css tutorials on youtube. Following along step by step really helps with the basics.
No reason. I wasn’t saying that you had to change it from an unordered list. I was simply saying that, for the purposes of the project, it did not have to be an unordered list. Neither is better than the other in terms of web presentation. But, for someone trying to learn HTML and CSS, it can be easier to execute a more simplified version of code. That’s all.
BTW, how is your code and project going now? Are you getting the results you were looking for?
I have had a little time to work on it, and the suggestions here have really helped, however, since changing away from my unordered list , I’ve lost the styling that I had applied to the nav-links, and they aren’t jumping to the sections correctly, so I’ll have to figure that out.
I’m sure that beyzakygsz7 is right that I need to keep going over basic tutorials until writing becomes natural.
Using a list for nav links is never a bad idea. I believe it can have some accessibility benefits as well (lists are read differently). But you do not have to use a list.
In any case, your selectors would have changed if your HTML changed and you might be missing some container elements you had before (the ul is a container for the li element and the li element is a container for the a element).
Correct. When I changed from my ul, I then commented out my css for ul and li, so I’m going to change back, uncomment and see what I can do for now.
Ahh, yes. Accessibility was not on my mind in the terms of this project. But you are absolutely correct.