CODEWITHSUNDEEP
htmlcss
derek
derek

Reputation: 41

make the hover background fill completely up to the end of the Nav background

I am trying to achieve this

I want my navbar to work so that on hover it fills up to each side of the background of the original nav divs background. Because otherwise it keeps on making small squares inside of the UL. I don't know why setting padding inside the class i specified in the a links does not fix this problem. I left borders around each element to make it easier to follow what im saying. When I hover on home it only stays in a small box around the letters and the color doesnt extend to the end.

.nav_links{
    font-weight: bold;
    font-size: 1.5rem;
    padding: .5rem;
    list-style-type: none;
    border: 5px solid black;
}

.nav_link{
    padding: 1rem;
    text-decoration: none;
    color: #F4D06F;
    text-transform: capitalize;
    display: block;
    padding: 0.5rem 1rem;
    transition: all 0.5s ease-in-out;
    padding: 0.5rem 1rem;
    border: 5px solid black;
}
.nav_link:hover{
    border: black;
    background: var(--Cwhite);
    padding: .5rem;
}

li:not(:last-child) {
    margin-bottom: 5px;
}
<header class="header" id="header">
  <div class="banner">
    <h1 class="banner-title">Pen Pen Pizza</h1>
    <div class="banner-icons">
      <a href="#" class="banner_social-icon">
      <i class="fab fa-facebook fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-twitter fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-google-plus fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-instagram fa-fw"></i>
      </a>
    </div>
  </div>
  <div class="navBtn">
    <i class="fas fa-bars"></i>
  </div>
  <nav class="nav">
    <ul class="nav_links">
      <li><a href="#Header" class="nav_link">Home</a></li>
      <li><a href="#About" class="nav_link">About</a></li>
      <li><a href="#Contest" class="nav_link">Contest</a></li>
      <li><a href="#Work" class="nav_link">Work</a></li>
      <li><a href="#Contact" class="nav_link">Contact</a></li>
    </ul>
  </nav>
</header>

Upvotes: 0

Views: 63

Answers (2)

crazychukz
crazychukz

Reputation: 676

The problem is that the ul element has a browser default padding-left of about 40px.

So if you need your li element to flush to the left you have to custom style your nav-links which is a ul element.

.nav_links{
    font-weight: bold;
    font-size: 1.5rem;
    padding-left: 0 !important;
    list-style-type: none;
    border: 5px solid black;
}

Upvotes: 1

inputforcolor
inputforcolor

Reputation: 919

maybe I've misunderstood something _ but shouldn't 

    .nav_link:hover {
       border: black;
       background: var(--Cwhite);
       padding: .5rem;
    }

be 

    .nav_link:hover {
       border: black;
       background: var(--white);
       padding: .5rem;
    }

Upvotes: 0

Related Questions