1

So I have this nav-bar where I used flex with flex-direction column to make the child elements under eachother. The problem I now have is that the width on the child elements is the same on all of them. I am trying to avoid this so I can make a moving underline using span. Anyone have some good ideas to avoid all of the child elements to get the same width, and rather be exactly the width that they are.

body > aside {
  width: 50%;
  display: flex;
  flex-direction: column;
}

body > aside > section {
  height: calc(100vh - 50px);
  position: sticky;
  top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body > aside > section > nav {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

body > aside > section > nav > div {
  display: flex;
  flex-direction: column;
}

body > aside > section > nav > div > a {
  color: grey;
  font-weight: 900;
  text-decoration: none;
  font-size: 25px;
  transition: 0.3s;
  font-variant: small-caps;
}

body > aside > section > nav > div > a:hover {
  color: var(--4nd-main-color);
  text-decoration: none;
  font-size: 25px;
}

body>aside>section>nav>div>span {
  background-color: var(--4nd-main-color);
  width: 00%;
  margin-top: 1.5px;
  border-radius: 3.5px;
  transition: 0.5s;
  height: 8px;
}
<body>
  <aside>
    <section>
      <nav>
        <div>
          <a class="h" href="#1">Home</a>
          <span id="underline1"></span>
        </div>
        <div>
          <a id="e" href="#2">Employees</a>
          <span id="underline2"></span>
        </div>
        <div>
          <a id="cu" href="#3">Contact us</a>
          <span id="underline3"></span>
        </div>
        <div>
          <a id="au" href="#4">About us</a>
          <span id="underline4"></span>
        </div>
      </nav>
    </section>
  </aside>
</body>
BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16
jason s
  • 11
  • 3

1 Answers1

2

You can align the flex items to flex-start in order to make the divs the same width as the content. 

 nav {
   align-items: flex-start;
 }
SROwl
  • 285
  • 1
  • 6