Как сделать фиксированное меню?

Question

[Aladdin]

Нужно сделать так, чтобы при уменьшении ширины экрана меню также оставалось по центру этой страницы, а оно съезжает. В position'ах я не разбираюсь, только учусь

codepen.io/MrTabrest/pen/yVZxzy <-- Ссылка на код

Answer 1

[Алексей]

Добавляем обертку для меню

<div class="menu__wrapper">
  <div class="menu">
  ...
  </div>
</div><!--/.menu__wrapper (отмечаем конец обертки, дабы не путать с другими закрывающими тегами) -->

Обертку раcтягиваем, а содержимое меню центрируем внутри относительно нее:

.menu__wrapper {
  width: 100%;
  margin: 0 auto;
}
.menu {
  width: auto;
  margin: 0;
  text-align: center;
}

Вот что получилось codepen

Таким образом меню центрируется при любой ширине экрана, и при изменении ширины из-за добавления пунктов меню, будет оставаться центрированной. Если по какой-то причине такое центрирование мешает. Можно подобрать ширину div.menu, при которой margin: 0 auto; будет продолжать выравнивать блок по центру. Но тогда возникнет проблема с расширением меню при добавлении пунктов.

Comments

[Aladdin]

Спасибо большое, это то что нужно

Answer 2

[Юрий Олиярнык]

.menu {
text-align: center;
}

.menu ul {
display: inline-block;
}

Answer 3

[Дмитрий Гавриленко]

Задайте классу menu фиксированную ширину и выравнивайте по центру с помощью margin

.menu {
    witdh: 616px;
    margin: 0 auto;
}

Comments

[Aladdin]

это не помогло, мне нужно, чтобы она всегда была 50% относительно ширины монитора, только как этого добиться я не знаю

[Дмитрий Гавриленко]

Mr. Tabrest: а 50% это ширина блока меню или его отступ от левого края?

Answer 4

[Павел Якупов]

используйте не абсолютное, а относительное позиционирование menu, и задайте левый margin в 35%