CODEWITHSUNDEEP
htmlcss
Satvik Gaikwad
Satvik Gaikwad

Reputation: 48

Background colour for Navigation bar

I am new to css I am trying to develop a navigation bar for website it works fine when it is in full screen, but when i decrease the size of window few elements came down but the background colour remain intact to first row only. Here's the code

.navbar {
  background-color: rgb(11, 29, 66);
  height: 60px;
  border-radius: 0px;
}

.navbar ul {
  margin: 0px;
  padding: 0px;
  overflow: auto;
}

.navbar li {
  float: left;
  list-style: none;
  margin: 10px 10px;
  border-right: 2px solid gold;
}

.navbar li a {
  text-decoration: none;
  color: khaki;
  padding-right: 0.5cm;
  font-family: 'Big Shoulders Stencil Display', cursive;
  font-size: 28px;
}
<nav class="navbar">
  <ul>

    <li>
      <a href="#" class="active"><img src="favicon-32x32.png" alt="Home"></a>
    </li>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
    <li><a href="#">Element 4</a></li>
    <li><a href="#">Element 5</a></li>

  </ul>
</nav>

Upvotes: 0

Views: 57

Answers (2)

John
John

Reputation: 5337

You can add the background color to your .navbar ul

like this :

.navbar ul {
    margin: 0px;
    padding: 0px;
    overflow: auto;
    background-color: blue;
}

Upvotes: 0

Aib Syed
Aib Syed

Reputation: 3196

It's your height property on the navbar. I removed it, run the snippet below:

.navbar {
  background-color: rgb(11, 29, 66);
  border-radius: 0px;
}

.navbar ul {
  margin: 0px;
  padding: 0px;
  overflow: auto;
}

.navbar li {
  float: left;
  list-style: none;
  margin: 10px 10px;
  border-right: 2px solid gold;
}

.navbar li a {
  text-decoration: none;
  color: khaki;
  padding-right: 0.5cm;
  font-family: 'Big Shoulders Stencil Display', cursive;
  font-size: 28px;
}
<nav class="navbar">
  <ul>

    <li>
      <a href="#" class="active"><img src="favicon-32x32.png" alt="Home"></a>
    </li>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
    <li><a href="#">Element 4</a></li>
    <li><a href="#">Element 5</a></li>

  </ul>
</nav>

Upvotes: 1

Related Questions