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

Why are these Nav_Items going down? – CSS

I was trying to make a Navbar. Here is the Codepen link:

https://codepen.io/rajin100000/pen/JjaxMjZ

I am using Tailwind CSS.

When the first Nav_Link1 has Guide inside, everything is working as expected. But if I remove this Guide inside Nav_Link every item is going down, and the first item is higher than other items. Why is this happening?

Tags:

2

Answers


  1. 0

    This is happening because of the line-height and height. If you remove them , it will not make the othe nav link down.

    Also you can update

     padding: 1rem 1.25rem 1.25rem 1.25rem;

    html file

    <header class="Header_Nav">
  <nav class="Nav_Bar">
    <ul class="Nav_List">
      <!--[-->
      <li class="Nav_Item"><a href="/guide" class="Nav_link">Guide</a></li>
      <li class="Nav_Item"><a href="/resources" class="Nav_link">Resources</a></li>
      <li class="Nav_Item"><a href="/network" class="Nav_link">Network</a></li>
      <li class="Nav_Item"><a href="/support" class="Nav_link">Support</a></li>
      <li class="Nav_Item"><a href="/about" class="Nav_link">About</a></li>
    </ul>
  </nav>
</header>

    CSS

    body {
  --bg: #334155;
  --color: #f8fafc;
  background-color: var(--bg);
  color: var(--color);
}

.Header_Nav {
  --bg-200: #64748b;
  display: flex;
  flex-flow: row wrap;
  height: 3.5rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.1rem solid var(--bg-200);
  padding: 0 3rem;
}

.Nav_Bar {
  display: flex;
  flex-flow: row wrap;
  height: 3.5rem;
  justify-content: space-between;
  align-items: center;
}

.Nav_Item {
  display: inline-block;
}

.Nav_link {
  display: inline-block;
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  cursor: pointer;
}

.Nav_link.active {
  --cyan: #36e1f7;
  padding-bottom: 1.23rem;
  border-bottom: 0.1rem solid var(--cyan);
}
    Login or Signup to reply.
  2. 0

    this issue because you add display: inline-block; to .Nav_link. remove it then links didn’t gone down.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search