1

Собственно проблема: Есть хедер в котором располагаются элементы(Лого и меню), размеры хедера: 960 х 80 пикселей. вот макет как они должны быть расположены: введите сюда описание изображения Я написал вот такую разметку: но не могу понять как сделать что бы блок с логотипом и надписью были на одном уровне с меню? Это можно сделать с помощью margin но при уменьшении размеров верстка съезжает, можно ли это сделать при помощи бутстрап?

.menu-top {
  white-space: nowrap;
  height: 80px;
  height: 670px;
  background: url(../img/background-img.jpg) no-repeat 50% 50%;
}

#title {
  margin-top: 18px;
  margin-bottom: 10px;
  display: inline-block;
  font-size: 30px;
  color: #0bcec7;
}

nav a {
  color: #000;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  display: block;
  vertical-align: middle;
  margin-top: 26px;
  margin-bottom: 45px;
}

nav a:hover {
  text-decoration: none;
  color: #00e0d0;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<header>
  <div class="container">
    <div class="row menu-top">
      <div class="col-md-2">
        <img src="media/img/logo.png" alt="logo">
        <span id="title">You title</span>
      </div>
      <div class="col-md-8 pull-right">
        <nav>
          <ul class="list-inline pull-right">
            <li><a href="#" class="menu-item">Home</a></li>
            <li><a href="#" class="menu-item">About</a></li>
            <li><a href="#" class="menu-item">Expertise</a></li>
            <li><a href="#" class="menu-item">Teams</a></li>
            <li><a href="#" class="menu-item">Works</a></li>
            <li><a href="#" class="menu-item">People say</a></li>
            <li><a href="#" class="menu-item">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

1
  • vertical-align: middle; - Вы серьезно? Для вертикального выравнивания используйте flex или line-height
    – DaemonHK
    17 окт 2017 в 12:30

2 ответа 2

1

margin тут не при чём - вёрстка съезжает, потому что у Вас col-md-*, и при экране меньше 1199px колонки выстраиваются в 2 строки (всё равно что прямо задать col-sm-12)

задайте col-xs-2 и col-xs-8, а при экране менее 767px сворачивайте меню в бургер - тогда на любых экранах всё будет на одном уровне

5
  • да вы правы. Но как сделать что бы и логотип и меню были на одном уровне, то есть выровнены по вертикали?
    – Swartex
    17 окт 2017 в 11:46
  • а разве сейчас они не выровнены? 17 окт 2017 в 11:52
  • как мне кажется они сейчас не совсем правильно выравнены.
    – Swartex
    17 окт 2017 в 11:58
  • Вас смущает, то они выровнены отступами? или что значит "не совсем правильно"? 17 окт 2017 в 12:05
  • именно, что выравнивал отступами.
    – Swartex
    17 окт 2017 в 12:11
0

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

.menu-top {
  white-space: nowrap;
  height: 80px;
  height: 670px;
  background: url(../img/background-img.jpg) no-repeat 50% 50%;
}

#title {
  margin-top: 18px;
  margin-bottom: 10px;
  display: inline-block;
  font-size: 30px;
  color: #0bcec7;
}

nav a {
  color: #000;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  display: block;
  vertical-align: middle;
  margin-top: 26px;
  margin-bottom: 45px;
}

nav a:hover {
  text-decoration: none;
  color: #00e0d0;
}


/*new*/

#title,
.menu-item,
.menu-top img{
  display: inline-block;
  vertical-align: middle;
  line-height: 60px;
  margin-top: 0;
  margin-bottom: 0;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<header>
  <div class="container">
    <div class="row menu-top">
      <div class="col-md-2">
        <img src="media/img/logo.png" alt="logo">
        <span id="title">You title</span>
      </div>
      <div class="col-md-8 pull-right">
        <nav>
          <ul class="list-inline pull-right">
            <li><a href="#" class="menu-item">Home</a></li>
            <li><a href="#" class="menu-item">About</a></li>
            <li><a href="#" class="menu-item">Expertise</a></li>
            <li><a href="#" class="menu-item">Teams</a></li>
            <li><a href="#" class="menu-item">Works</a></li>
            <li><a href="#" class="menu-item">People say</a></li>
            <li><a href="#" class="menu-item">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.