Full width navigation with flexbox and space-between

user_1984257 0
Viewed 75

I'm using flexbox for a full width navigation and space-between to distribute the navigation items.

I need the nav hyperlinks to take up all the space between each nav item but when I set each LI to flex: 1 it breaks the space-between and the items are not distributed evenly anymore.

.site-header-nav {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 40px;
  padding: 0;
}

.site-header-nav li {
  flex-grow: 1;
}

.site-header-nav a {
  background-color: yellow;
  display: inline-block;
  padding: 10px;
  width: 100%;
}
<ul class="site-header-nav">
  <li><a href="#">Design Services</a></li>
  <li><a href="#">Marketing Services</a></li>
  <li><a href="#">Hosting Services</a></li>
  <li><a href="#">Search Marketing</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Company</a></li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

css
2 Answers

I added

    .site-header-nav li {
          display: flex;
          flex: 1;
          justify-content: center;
        }

and for each a

    display: flex;
    justify-content: center;

to distribute them as you want

.site-header-nav {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 40px;
  padding: 0;
}

.site-header-nav li {
  display: flex;
  flex: 1;
  justify-content: center;
}

.site-header-nav a {
  background-color: yellow;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 100%;
}
<ul class="site-header-nav">
  <li><a href="#">Design Services</a></li>
  <li><a href="#">Marketing Services</a></li>
  <li><a href="#">Hosting Services</a></li>
  <li><a href="#">Search Marketing</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Company</a></li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

user_135448490

You can try setting width: -webkit-fill-available; on your .site-header-nav-2. This works simultaneously with setting width: inherit; on .site-header-nav-2 a and your .site-header-nav-2 li. This will ensure that all your nav hyperlinks will take up all the space between each nav item. I added a gap just to demonstrate the inherited with. See the changes below.

Also, you forgot to close your <li>'s

.site-header-nav {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 40px;
  padding: 0;
}

.site-header-nav li {
  flex-grow: 1;
}

.site-header-nav a {
  background-color: yellow;
  display: inline-block;
  padding: 10px;
  width: 100%;
}
.site-header-nav-2 {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: -webkit-fill-available;
    gap: 10px;
}
.site-header-nav-2 li {
  width: inherit;
}

.site-header-nav-2 a {
  background-color: red;
  display: inline-block;
  padding: 10px;
  width: inherit;
}
<p>Hyperlink is full width of LI but not space-between</p>
<ul class="site-header-nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
</ul>
<p>Hyperlink is not full width of LI but is space-between</p>
<ul class="site-header-nav-2">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 1</a></li>
</ul>

EDIT:

.site-header-nav ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}

.site-header-nav {
  width: 100%;
  background-color: yellow;
}

li {
  list-style-type: none;
}


.site-header-nav a {
  background-color: yellow;
  display: inline-block;
  padding: 10px;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  li a {
    font-size: smaller;
  }
}
<nav>
<div class="site-header-nav">
  <ul>
    <li><a href="#">Design Services</a></li>
    <li><a href="#">Marketing Services</a></li>
    <li><a href="#">Hosting Services</a></li>
    <li><a href="#">Search Marketing</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
</nav>

user_164963570
Related