CSS border bottom on Navigation bar-CodePudding

I have a navigation bar and I added a red line on the bottom when hovering any item of the list, but I want to move that red line under the header (something like "Services"), any idea how to achieve this?

I added an small sample in codepen so you can easily check 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>

CodePudding user response：

You can fix the header height and also fix the height of navbar items. Also, you had one issue where on hover li elements are moving. You can also fix that with always adding border with transparent color to the element, so the overall height of the element won't change on hover state.

Here is the 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

CodePudding user response：

I think just giving height to all list elements the same as the header will work.

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;
}

  <body>
    <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>
  </body>

CodePudding user response：

Hope this solves the issue.

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;
}

CodePudding user response：

I'd suggest the following approach, with explanatory comments in the CSS:

/* removing default padding and margin from all
   elements, and forcing the browser to use the
   same sizing algorithm - border-box - to calculate
   element sizes, including the padding and border
   widths in the declared size: */
*, ::before, ::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* setting common properties for the two element
   groups: */
header,
header nav ul {
  /* using display: flex layout:  */
  display: flex;
  /* forcing the flex-items within the flex parent
     to take the full height of that parent: */
  align-items: stretch;
}

header {
  background-color: lightblue;
  block-size: 3em;
  position: sticky;
  justify-content: space-around;
}

/* using :is() to combine the two selectors
     header a,
     header li
   into one selector: */
header :is(a, li) {
  /* using grid layout: */
  display: grid;
  /* positioning the - including text - content
     at the center of the element: */
  place-items: center;
}

header nav {
  min-width: 50%;
}

header nav ul {
  /* the <ul> isn't a flex-item so we have to specify
     that we want it to take all available space on 
     the block-axis (equivalent to 'height' in left-to-right
     languages such as English): */
  block-size: 100%;
  list-style: none;
  justify-content: space-between;
}

header li {
  /* to prevent the jumping content:  */
  border-bottom: 2px solid transparent;
}

header li:hover {
  /* to style the color of the bottom border: */
  border-bottom-color: 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>

JS Fiddle demo.

References:

Bibliography:

"Aligning items in a flex container," MDN.
"Basic concepts of flexbox," MDN.
"Box alignment in grid layout," MDN.