Centering 3 different size navbar elements using vanilla CSS

Question

Sorry if this question has been posted already. I've only found solutions to this that use Bootstrap or tackle similar issues but not quite the same. I need to solve this with vanilla CSS.

I have a navbar with 3 different elements like so: https://i.stack.imgur.com/xJHlQ.jpg

I centered everything using flexbox which worked fine except my left and my right elements are of different width. So the logo is centered between them perfectly albeit that means it's a little off to the right relative to the container. How do I make the logo centered relative to the container no matter what yet make it responsive?

I've been trying to fix this for hours now but only came up with a hacky way like inserting an invisible element to create extra margin on the right. Is there an easy fix I'm not seeing?

Here's the chuck of code:

.nav {
  display: flex;
  border: 2px solid red;
  /* justify-content: space-between; */
  align-items: center;
  
}

.nav__list--primary {
  gap: 1.5rem;
}

.nav__list--secondary {
  gap: 6rem;
  border: 1px solid blue; 
}

.navbar__item--icon {
  margin-top: 0.5rem;
}

.logo {
  margin: 0 auto;
}

header {
  margin-bottom: 6rem;
}

<header>
  <div class="container">
    <nav class="nav">

      <ul class="nav__list nav__list--primary row">
        <li class="navbar__item">
          <a class="text--black" href="#">SHOP</a>
        </li>
        <li class="navbar__item">
          <a class="text--black" href="#">VISIT US</a>
        </li>
        <li class="navbar__item">
          <a class="text--black" href="#">EVERYTHING ELSE</a>
        </li>
      </ul>

      <a href="#" class="navbar__item logo text--black">
        GRIND
      </a>

      <ul class="nav__list nav__list--secondary row">
        <li class="navbar__item--icon">
          <a class="text--black" href="#">
            <i class="bx bx-user-circle"></i>
          </a>
        </li>
        <li class="navbar__item--icon">
          <a class="text--black" href="#">
            <i class="bx bx-shopping-bag"></i>
          </a>
        </li>
      </ul>

    </nav>
  </div>
</header>

score 0 · Accepted Answer · answered Jul 15 '22 at 06:12

One way would be to use grid on the nav element, justifying their content left, center and right respectively.

Here's the code you have given with that change:

.nav {
  /*display: flex;*/
  border: 2px solid red;
  /* justify-content: space-between; */
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.nav> :nth-child(2) {
  display: flex;
  justify-content: center
}

.nav> :nth-child(3) {
  display: flex;
  justify-content: right;
}

.nav__list--primary {
  gap: 1.5rem;
}

.nav__list--secondary {
  gap: 6rem;
  border: 1px solid blue;
}

.navbar__item--icon {
  margin-top: 0.5rem;
}

.logo {
  margin: 0 auto;
}

header {
  margin-bottom: 6rem;
}

<header>
  <div class="container">
    <nav class="nav">

      <ul class="nav__list nav__list--primary row">
        <li class="navbar__item">
          <a class="text--black" href="#">SHOP</a>
        </li>
        <li class="navbar__item">
          <a class="text--black" href="#">VISIT US</a>
        </li>
        <li class="navbar__item">
          <a class="text--black" href="#">EVERYTHING ELSE</a>
        </li>
      </ul>

      <a href="#" class="navbar__item logo text--black">
            GRIND
          </a>
      <div>
        <ul class="nav__list nav__list--secondary row">
          <li class="navbar__item--icon">
            <a class="text--black" href="#">
              <i class="bx bx-user-circle"></i>
            </a>
          </li>
          <li class="navbar__item--icon">
            <a class="text--black" href="#">
              <i class="bx bx-shopping-bag"></i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>enter code here

Note: the third child was wrapped in a div so that the (smaller actual) content can be shown with its border rather than the whole 1fr being bordered.

Centering 3 different size navbar elements using vanilla CSS

1 Answers1