Equal widths in navbar bootstrap 4

Question

Need some help styling a navbar with bootstrap 4 and flex box. The design I would like is essentially as below, but I would like the logo in the centre and therefore the space for the links either side to be equal.

         --------------------------------------------------------------
|         |    Link  |   Link  |   Logo   |  LongerLink  |  LongerLink |        |
         --------------------------------------------------------------

The issue I have at the moment is that the LongerLink items are taking up more space than the shorter Links and so the logo is offset to the left. How do I fix this? Code below.

.navbar {
  background-color: #389FCE;
  height: 100px;
  display: flex;
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  font-family: 'Nexa-Bold', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: white;
  line-height: 80px;
}

<nav class="navbar navbar-expand-sm">
  <button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
      <i class="fas fa-bars" style="color:white; font-size:28px;"></i>
    </span>
  </button>

<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item">
        <a class="nav-link" id="shortLink" href="#">HOME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="shortLink" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="images/Logo_navbar.png">
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="longLink" href="#">PRODUCTS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="longLink" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

Sorry, centered full width. Will update the original post – Tom Nov 18 '19 at 15:54 — Tom, Nov 18 '19 at 15:54

score 0 · Accepted Answer · answered Nov 18 '19 at 16:13

0

You would have to set widths based on the number of items to do that. There is no flexbox property that will manage it for you.

.nav-fill .nav-item {
    flex: 1 0 20%; /* 5 items of 20% each */
    text-align: center;
    border:1px solid red;
}

Codepen Example

answered Nov 18 '19 at 16:13

Paulie_D

107,962
13
142
161

Thanks Paulie, this seems to have done the trick. By extension, if I wanted to limit the extent to which the navbar expands (say only 70% of the view width), is there a straightforward way to do this? I'm struggling to find the correct class(es) which would implement this. First figure in original post updated to show what I'm after. – Tom Nov 19 '19 at 12:18
1

If you want to limit the width of the navbar just use `max-width:70%`..and center it however you wish. – Paulie_D Nov 19 '19 at 12:20

score -1 · Answer 2 · answered Nov 18 '19 at 16:14

You can make the nav-item's flex-basis: 100% (instead of auto). Also allow them to shrink (setting a min-width is also necessary as explained here)...

.nav-item {
    flex: 0 1 100%;
    min-width: 0.1px;
}

Then, you'll need to consider how you want to handle the hiding of overflowing text when the longer links are wider than the other links. I'd use text-overflow: ellipsis; like this...

.nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Demo: https://codeply.com/p/N8MvGaunOR

Equal widths in navbar bootstrap 4

2 Answers2