Question 74558 in CSS Question posted in
Some basic documentation can be found here.

Vertically align ul list items for navbar – Css

I am trying to recreate a custom navbar. The navbar has four buttons as shown in the image.

enter image description here

However, in my navbar, one of the buttons always seems to bunch down. I wanted to see if it is due to lack of space by removing a link but one link always seems to come down.

enter image description here

Does anyone have the solution to achieve the navbar like in the above image? I am kind of rusty on my css so the solution so any help to understand why this is happening would be appreciated.

here is my html for the navbar and the css

.navigation-bar {
  position: fixed;
  z-index: 1;
  margin: auto;
}

.navigation-bar li {
  list-style-type: none;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  overflow: hidden;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  float: right;
}
<div class="navigation-bar">
  <img style="float: left" src="assets/shared/logo.svg" alt="">
  <ul class>
    <li>
      <a href="#">
        <h6><strong>03  </strong>TECHNOLOGY</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>02  </strong>CREW</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>01  </strong>DESTINATION</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>00  </strong>HOME</h6>
      </a>
    </li>
  </ul>
</div>

I tried some solutions but nothing seemed to work. I am not able to bring the links in a single line and not able to align it to the right as well.

Tags:

3

Answers


  1. 0

    first

    delete class from line 3 <ul class>

    second

    learn flex-box , float is old school

    .navigation-bar ul {
    overflow: hidden;
    height: 70px;
    background-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);

    //added properties
    width:100%;
    display:flex;
    justify-content:space-evenly;
}

    resources for flex-box:

    1. Kevin Powell youtube tuto : https://youtu.be/u044iM9xsWU
    2. MDN docs : https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
    Login or Signup to reply.
  2. 0

    This is fast solution with flexboxes. I tried to do header like on your 1st screen.

    .main-page {
  background: gray;
  height: 100vh;
  width: 100wv;
}

.navigation-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
 
}

.navigation-bar li {
  list-style-type: none;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  margin: 0;
  padding: 0 5%;
  display: flex;
  overflow: hidden;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  float: right;
  padding: 0 10px;
  transition: background-color 0.3s ease;
}

.navigation-bar h6 {
  font-size: 12px;
  font-weight: 400;
}

.navigation-bar li:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.25);
}

.navigation-bar a:link {
  text-decoration: none;
  color: white;
  }

.navigation-bar a:visited {
  color: white;
  }
    <div class="main-page">
  <div class="navigation-bar">
    <img src="assets/shared/logo.svg" alt="">
    <ul>
      <li>
        <a href="#">
          <h6><strong>03  </strong>TECHNOLOGY</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>02  </strong>CREW</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>01  </strong>DESTINATION</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>00  </strong>HOME</h6>
        </a>
      </li>
    </ul>
  </div>
 </div>
    Login or Signup to reply.
  3. 0

    Flex box is definitely the way to go here. Others have provided very useful links but I’d also have a look at css tricks article on this. I went to town a bit on this but see fully annotated markup below

    /* added this to give you a starry night */
body {
  margin: 0;
  background-image: url(https://picsum.photos/3333/5000?image=827);
  background-size: cover;
}

.navigation-bar {
  --ul-left-padding: 2rem; /* this is how far we want the ul left padding to be*/
  display: flex; /* added this */
  align-items: center; /* added this */
  /*position: fixed; removed this so the navigation bar is full width*/
  position: sticky;
  margin-top: 0.5rem;
  padding-left: 1rem;
  /*z-index: 1; deleted this*/
  /*margin: auto; deleted this - not needed */
}

.navigation-bar li {
  list-style-type: none;
  counter-increment: count; /* added this so we can use counters*/
}

/* added this rule so rather than adding numbers, it does it automatically for you!*/
.navigation-bar li::before {
  content: "0"counter(count);
  margin-right:0.5rem;
  font-weight: bold;
}

/* added this to ensure the anchor elements look like the parent elements */
.navigation-bar a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
  border-radius: 100%; /* put a circle around the cat */
}

.navigation-bar ul {
  
  display: flex; /* added this to arrange the li elements in a row*/
  align-items: stretch; /* added this so the li:hover rule puts the line at the bottom of the element*/
  gap: 0.5rem; /* added this to put a space between each li elmement*/
  margin: 0;
  padding: 0 1rem 0 var(--ul-left-padding); /* added this to remove default padding and put a space on each side.*/
  /*overflow: hidden;*/
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  display: flex; /* make this a flex item to space the anchor elements vertically in the center */
  align-items: center;
  /*float: right; removed this */
  padding-inline: 0.5rem;
  color: white;
  border-bottom: 2px solid transparent; /* so the border doesn't keep shoving up the text, if we make the border transparent it'll take up the space but won't be visible */
  transition: border-bottom-color 200ms; /*make it a smooth transition */
}

.navigation-bar li:hover {
  border-bottom-color: white;
}

.spacer {
  flex-grow: 1;
  position: relative; /* create a new containing block for the ::before pseudo element */
}
.spacer::before {
  content: ""; /* always need this so it displays */
  position: absolute; /* move this to the center of the parent element */
  left: 1rem;
  top: 50%;
  height: 0.25rem;
  width: calc(100% + var(--ul-left-padding) * 0.25); /* make the width so it always overlaps the ul to the right by 25% of the stated padding */
  background: rgba(128,128,128,0.25); /* make it a bit transparent */
  z-index: 1; /* put ut in front of the ul element */
}
    <div class="navigation-bar">
  <img src="https://placekitten.com/50/50" alt=""><!-- deleted style attribute - floats are so 1990s-->
  <div class="spacer"></div> <!-- added this so it pushes the menu to the right.-->
  <ul>
    <!-- I've rearranged these to put them in the order you specified in the image example supplied and removed the <h6> tag. We'll style the anchor tag instead. We'll use counters to add the numeric prefixes-->
    <li><a href="#">HOME</a></li>
    <li><a href="#">DESTINATION</a></li>
    <li><a href="#">CREW</a></li>
    <li><a href="#">TECHNOLOGY</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search