Need Help on Nav Bar

HTML-CSS
1

Alright Code Campers, I need help.

I have been working on the Product landing page and I have restarted many times over and over because I am trying to understand things thoroughly before moving forward.

I cannot figure out how to get a solid border around my image and nav bar without the awkward colors the happen around it. Trying to create one bar across the top with the links and image inside of it.

How do I do that? Do I create a container around the whole nav bar?

3

Add a bottom border to your header, or add a container around your nav and img if you don’t want to do it to the header.

Add this to CSS.

#header{
  border-bottom:2px solid black;
  padding-bottom:100px;
}

Does this help you out?

4

just updated the codepen. I want to make the nav bar the same color all the way across. instead of the different colors behind the letters and image.

5

YES! Wow, sometimes the answer is so easy lol.

the real question is how do i fill in the whole box and have the letters and image on top of it. @driverpizza

6

Apply this

.santa-img{
  display: flex;
  float: right;
  width: 75px;
  height: 70px;
  background-color:gray
}
.nav-link{
  background-color:gray
}
7

You are a rock star. It all make sense now thank you.

1 Like
8

Hi @steve.clements24
Just remove this,

* {
background: #b1b9b1;
}
and replace it with this,
body {
background: #b1b9b1;
}

" * " will apply the background-color effect to all the elements, so it’s not a good practice to assign like that.
Also by doing this, you can now delete all the "background-color" property from "ul, nav and other elements" , it will reduce the weight of your code

1 Like