0

Выезжают за полосу хедера вниз

Логотип и кнопка, скрывающая выползающие пункты, выезжает за пределы серого хедера Как сделать так, чтобы они были на одной прямой и именно на уровне серого хедера, подскажите, пожалуйста

body {
  font-family: 'Dosis', sans-serif;
  color: #f5f5f5;
  background-color: #fbfcfb;
  font-size: 12px;
  line-height: 1.5;
}

header {
background-color: #00008B;
margin: 0;
font-size: 18px;
}

.menu {
  border: none;
}
.nav-left li,
.navbar-right li {
  padding: 15px 15px;
}

.navbar-right li a{
  padding-right: 3px;
  padding-top: 13px;
}

.navbar-logo {
  padding-right: 60px;
  padding-left: 40px;
}

.navbar-logo img {
  position: relative;
  top: 25px;
}

.nav-left li:hover,
.navbar-right li:hover {
  text-transform: uppercase;
  color: #32CD32;
}

.navbar-nav .active-link {
  text-transform: uppercase;
}


.glyphicon-contact {
  font-size: 24px;
  line-height: 75px;
  position: absolute;
  color: #000000;
  right: 165px;
  top: 5px;
  display: none;
}

@media only screen and (max-width: 1198px) {

  .navbar-right {
    display: none;
    position: absolute;
    right: 175px;
    top: 55px;
  }

.glyphicon-contact {
  display: block;
  cursor: pointer;
}

.navbar-right li {
  float: none;
  padding: 0;
}
.navbar-right li a {
  padding-bottom: 5px;
}
}
<header>
      <nav class="navbar navbar-default menu">
  <div class="container">
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-logo" href="#"><img src="img/logo.png" width="35"></a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-left">
        <li class="active-link"><a href="#">Professional skills</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About me</a></li>

        <li><a href="#">Interesting in web</a></li>
      </ul>


      <ul class="nav navbar-nav navbar-right">

          <li><a href="#"><img src="img/mail.png" height="" width="27"></a></li>
          <li><a href="#"><img src="img/github.png" height="" width="26"></a></li>
          <li><a href="#"><img src="img/linkedin.png" height="" width="27"></a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
    <span class="glyphicon glyphicon-phone-alt glyphicon-contact"></span>

  </div><!-- /.container-->
</nav>
</header>

2
  • 1
    нету такого волшебного фреймворка который адаптирует что угодно под что угодно ... требуется или кастомизация или знания css
    – user33274
    5 мая 2018 в 5:07
  • Вы абсолютно правы.
    – Rtototam
    5 мая 2018 в 22:13

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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