CSS

Calvin Castillo
Calvin Castillo
1,101 Points

How can I create a proper active background size to my navbar?

I am having a really hard time creating a background color inside my navbar to make a link active, I keep getting background colors that do not fit the entire height of the navbar, what am I doing wrong?

This is what I am trying to achieve

<div class="header-1">
  <img src="http://www.bxconsortium.org/uploads/2/5/2/4/25243029/1386401365.png">
</div>

<!--- Navbar --->
<header>
  <div class="main-nav">
    <ul class="links">
      <a href="#"><li class="highlight">home</li></a>
      <a href="#"><li>our membership</li></a>
      <a href="#"><li>our work</li></a>
      <a href="#"><li>events calendar</li></a>
      <a href="#"><li>continuing education</li></a>
      <a href="#"><li>more...</li></a>
    </ul>
  </div>
</header>
body {
  margin: 0;
  padding: 0;
}

.header-1 {
  background-color: #272727;
  padding: 20px;
}

.header-1 img {
  width: 50%;
  margin-left: 15%;
}

/* ==== Navbar === */

.main-nav {
  background: #ececec;
  position: relative;
  bottom: 10px;
}

.links {
  margin-left: 12%;
}

.highlight {
  background: #acbcb9;
  color: #fff;
}

li {
  color: #7a7a7a;
  font-family: arial;
  font-weight: bold;
  display: inline-block;
  list-style: none;
  padding: 10px;
  text-transform: uppercase;
  position: relative;
  left: 20px;
}

li:hover {
  background: #acbcb9;
  color: #fff;
}

This is what i keep getting

<div class="nav">
  <ul>
    <li><a href="#">Home</li></a>
    <li><a href="#" class="highlight">Tutorials</li></a>
    <li><a href="#">About</li></a>
    <li><a href="#">Newsletter</li></a>
    <li><a href="#">Contact</li></a>
  </ul>
</div>
body {
  margin: 0;
  padding: 0;
}

.nav {
  width: 960px;
  margin: 0 auto;
}

div {
  background: #444;
  padding: 1px;
  position: relative;
  top: 10px;
}

div a {
  color: #fff;
  text-decoration: none;
  font-size: 25px;
  font-weight: thin;
  font-family: Oswald;
  margin-right: 50px;
}

.nav li {
  display: inline-block;
  position: relative;
  left: 14%;
}

.highlight {
  color: #444;
  background: #fff;
  border-bottom: 1px solid #444;
}

 a:hover {
  background: #079992;
  transition: 0.4s;
}
hayden carnegie
hayden carnegie
599 Points

Sorry I'm struggling to see your problem, can you reword it please or give more context?

1 Answer

Calvin Castillo
Calvin Castillo
1,101 Points

I cannot get the nav menu's to cover the entire background when you hover over them, its too small.