Landing Page navbar getting overlapped by content

Code Feedback
1

Hey guys so i’ve been able to get my nav bar to stay fixed however it keeps getting overlapped by other content I have on the same page. And also I have loads of extra space and I am not sure how to get rid of it to the right and below all my content is. I would really appreciate the help. I do think it’s because I keep putting position:relative; for a lot of things but also am not sure. Thank You for the time I do appreciate it!

2

Add z-index:1, and fix the background color, inside the nav{ }

Now, there are a few suggestions I’d do:

  • Check out the names in the html file.
  • Ids shouldn’t be sentences, it’s just one word most of times.
  • Try to keep things simple when you’re starting, don’t try to make it great, just neat and with a clear concept.
1 Like
3

thank you so much for the input!! and thanks also for that last bullet point… i mean naturally i like to push myself but yes sometimes trying to make it great does get in the way of progress. but also, i still do have tons of extra space on my page. I tried messing with margins and padding in my body but never was able to get rid of the extra space.

thank you 10x

4

Your welcome. It’s easy to get lost trying to make things perfect. Just make the minimum to grasp the concept and move on. You’re doing well.

1 Like
5

Welcome to the forums @armando.ortiz.302. I know you’re not asking for feedback on your page but I thought I let you know about this so you can clean some things up.

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors. You can also ignore the warnings about adding a header to your sections if you want. They’re there to help with semantics.
    • There are HTML coding errors you should address.
  • Your page needs to be responsive. On smaller screens there’s a horizontal scrollbar.
1 Like
6

Hey Roma thanks for that I did run the code through the validator and did notice there were some tags I left open and other small mistakes. I will definitely utilize this in the future. And thanks for the feedback! even though I didn’t ask for it i’m glad i’m getting it just taking in all i can. thank you.

1 Like
7

Hey and another quick questions if anyone wants to answer. Roma since you mentioned I should make the page responsive to smaller screens, should I worry (or is it just good practice by all developers) about having everything I make (ex. portfolio) compatible with smaller devices like phones?

8

More and more people are using smaller devices and this course is called Responsive Web Design so yes, your projects should be compatible with smaller devices.
One of the user stories for this, and the next two projects, require that you use a media query.

1 Like