search

Home  >  Q&A  >  body text

CSS bottom border on navigation bar

I have a navigation bar and I have added a red line at the bottom when any item in the list is hovered, but I want to move that red line below the title (e.g. "Services"), any idea how to achieve this?

I've added a small example in the codepen so you can easily inspect the HTML and CSS code

header {
  background-color: lightblue;
  padding-top: 1rem;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header nav {
  min-width: 50%;
}

header nav ul {
  margin: 0;
  height: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header li:hover {
  height: 100%;
  border-bottom: 2px solid red;
}
<header>
  <a href="/">
    <p>Whatever logo</p>
  </a>
  <nav>
    <ul>
      <li>About us</li>
      <li>Services</li>
      <li>Pricing</li>
      <li>Blog</li>
    </ul>
  </nav>
  <a href="/">CONTACT</a>
</header>

View code link

P粉270891688P粉270891688263 days ago520

reply all(2)I'll reply

  • P粉274161593

    P粉2741615932024-04-07 14:15:16

    I think just give all list elements the same height as the header.

    like this:-

    header {
      background-color: lightblue;
      padding-top: 1rem;
      height: 3rem;
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    
    header nav {
      min-width: 50%;
      height : 100%;
    }
    
    header nav ul {
      margin: 0;
      height: 100%;
      list-style: none;
      padding-left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    header li{
      height: inherit;
    }
    
    header li:hover {
      border-bottom: 2px solid red;
    }
      
        

    Whatever logo

    CONTACT

    reply
    0
  • P粉998100648

    P粉9981006482024-04-07 13:14:16

    You can fix the title height, and you can also fix the height of the navigation bar items. Also, you have an issue where the li element moves when hovered. You can also solve this problem by always adding a transparent color border to the element so that the overall height of the element does not change on hover.

    This is fixed CSS

    header {
      background-color: lightblue;
      position: sticky;
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: space-around;
    }
    
    header nav {
      min-width: 50%;
    }
    
    header nav ul {
      margin: 0;
      height: 100%;
      list-style: none;
      padding-left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    
    header li {
      display: flex;
      align-items: center;
      border-bottom: 2px solid transparent;
      height: 60px;
    }
    
    header li:hover {
      border-bottom: 2px solid red;
    }

    https://codepen.io/swarajgk/pen/JjZewPo?editors=1100

    reply
    0
  • Cancelreply