Justify menu in Bootstrap 3 navbar

Question

I can't justify menu in bootstrap 3 using regular text-align:justify and display: inline-block, but everything is ok on the sites without bootstrap.

1. The site without bootstrap (http://shop.staceydogs.ru). The menu have this structure:

   .sd-menu
   — ul
   — — li
   — — li
   ...
   — — li
   — — ul:after
   

And this style:

.sd-menu {
  width: 100%;
}
.sd-menu ul {
  list-style: none;
  text-align: justify;
}
.sd-menu ul li {
  display: inline-block;
}
.sd-menu ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

And everything works great!

1. The site with bootstrap (http://dogs.fuksman.ru). The menu have this structure:

   .navbar
   — ul.navbar-nav
   — — li
   — — li
   ...
   — — li
   — — .navbar-nav:after
   

And this style (only non-standard for bootstrap styles are shown):

.navbar-nav {
  text-align: justify;
  > li {
    display: inline-block;
  }
}
.navbar-nav:after {
  content: '';
  width: 100%;
  display: inline-block;
}

And it doesn't work! Can you help me?

Answer 1

You can try to replace navbar-nav with nav-justified:

<ul class="nav nav-justified">
  <li><a href="/news">Новости</a></li>
  <li><a href="/video">Видео</a></li>
  <li><a href="/texts">Тексты</a></li>
  <li><a href="/photo">Фото</a></li>
  <li><a href="/about">О группе</a></li>
  <li><a href="/music">Купить музыку</a></li>
  <li><a href="http://shop.staceydogs.ru/">Магазин</a></li>
</ul>

Example of Bootstrap's built-in nav-justified can be found in here: http://getbootstrap.com/examples/justified-nav/

OT: You seem to have unnecessary navbar -related classes in your elements. E.g.

<header class="nav navbar navbar-default navbar-static-top" role="navigation">

I suggest you will check the example's source code and fix your markup accordingly.