Выравнивание bootstrap меню по центру?

Question

[lindim3000]

Добрый день, есть стандартное меню от bootstrap:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Главная</a></li>
                        <li><a href="#about">Портфолио</a></li>
                        <li><a href="#contact">Обо мне</a></li>
                        <li><a href="#contact">Контакт</a></li>
                      </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

как сделать что бы оно было по центру экрана?

Answer 1

[omelchenkosp]

style.css :
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav li {
float: none;
display: inline-block;
}

Comments

[VitalyKashtanov]

Сработало, только и в мобильном меню стало в ряд. Подскажите, как сделать вертикальными?

[Zempik]

VitalyKashtanov, нужно дописать media (min-width: 768px):

@media (min-width: 768px) { 
  .nav.navbar-nav { 
    float: none; 
    text-align: center; 
  } 
 
  .nav.navbar-nav > li { 
    float: none; 
    display: inline-block; 
  } 
}

Answer 2

[galynsky]

Убрать класс navbar-fixed-top и обернуть меню в <div class="container"></div>

Comments

[lindim3000]

Нужно что бы меню было всегда вверху! и по центру!

Answer 3

[Дмитрий Евграфович]

Ну не знаю. Так может?

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse text-center">
                      <div style="
    display: inline-block;
"><ul class="nav navbar-nav">
                        <li class="active"><a href="#">Главная</a></li>
                        <li><a href="#about">Портфолио</a></li>
                        <li><a href="#contact">Обо мне</a></li>
                        <li><a href="#contact">Контакт</a></li>
  </ul></div>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

С отступом между меню и обрамляющим его блоком я думаю, разберетесь.

Comments

[njxqlus]

.navbar-collapse {max-height:50px!important;}

Answer 4

[beeStudio]

Можно и так попробовать...

$(function(){
	var wBrowser = document.documentElement.clientWidth;
	var navbarWidth = $('.navbar-collapse').width(),
		  navWidth = $('.nav').width(),
		  navMargin = (navbarWidth/2)-(navWidth/2);
	$('.nav').css('margin-left', Math.round(navMargin));
	if(wBrowser < 768){
		  $('.nav').css('margin-left', '-15px');
	}
});