Как выровнять меню по центру bootstrap?

Question

[enerjze]

Подскажите, как выровнять меню по центру в css?
код следующий

.ftco-navbar-light {
  background: transparent !important;
  position: absolute;
  left: 0;
  z-index: 3;
  top: -20px; }

При скролле сайта вниз включается следующий код, там тоже нужно выровнять меню

position: fixed;
    right: 0;
    left: 0;
    top: 0;
	z-index: 3;
    margin-top: -130px;
    background: #fff !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

Answer 1

[Алексей Пахомов]

left: 50%;
transform: translateX(-50%);

Comments

[enerjze]

Получилось, но во втором случае, там где scroll, получается не по всей ширине экрана, если через width делать, то коряво выходит.

.ftco-navbar-light.scrolled {
    position: fixed;
    right: 0;
    left: 50%;
transform: translateX(-50%);
    top: 0;
	z-index: 3;
    margin-top: -130px;
    background: #fff !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

[Алексей Пахомов]

Если указываете свойство left свойство right указывать не надо.
Вот посмотрите все по центру при fixed позиции
Codepen Fixed Center

[enerjze]

Алексей Пахомов, Спасибо, стало лучше, но теперь такая вот проблема

.ftco-navbar-light.scrolled {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    padding: 0 20px;
    transform: translateX(-60%);    
    z-index: 3;
    background: #fff !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

[Алексей Пахомов]

Скорее всего у вас контейнер есть с ограниченной шириной и позицией в relative. Очень тяжело гадать. Смотрите ширину родителя

Answer 2

[Артем Спиридонов]

Поместить в контейнер. У контейнера абсолютное позиционирование, у меню - относительное.

Варианты:
Дать контейнеру text-align: center;
Дать меню margin-left:auto; margin-right: auto;

В любом случае ширину меню указать явно

В бутстрапе уже есть контейнеры

Comments

[enerjze]

в самом шаблоне так

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
	    <div class="container">
	      
		  <a id="#main"></a>

	      <div class="collapse navbar-collapse" id="ftco-nav">
	        <ul class="nav navbar-nav">
	          <li class="nav-item"><a href="#main" class="nav-link">ГЛАВНАЯ</a></li>
	          <li class="nav-item"><a href="#barbers" class="nav-link">МАСТЕРА</a></li>
	          <li class="nav-item"><a href="#prices1" class="nav-link">ЦЕНЫ</a></li>
	          <li class="nav-item"><a href="#contacts" class="nav-link">КОНТАКТЫ</a></li>
	        </ul>
			
	      </div>
	    </div>
	  </nav>

пробовал прописать text-align - не помогло.

[Артем Спиридонов]

Посмотрите в разделе "Примеры".

Контейнер - наружу. Содержимое - внутрь.

И да, выровнять по вертикали или по горизонтали?

[enerjze]

по горизонтали, вроде бы решение нашел, но примеры посмотреть не помешает, спасибо вам.

[Артем Спиридонов]

enerjze, тут есть кнопки "Нравится" и "Отметить решением". Спасибо вам =)