Адаптивная шапка

[MadSandwich]

Здравствуйте, знаю, что уже много было таких тем, но я видимо уже даже переборщил со стилями и со всем чем можно, но честно уже не вижу причину, что я с ней сделал не так, и почему она не адаптивная.
Укажите мне на мою ошибку и помогите сделать шапку адаптивной для любого разрешения экрана
Да класс Headr, это не ошибка.

Код самой шапки:

<headr class="page-header">
    <div class="logo">
        <img src="/img/11111.png">
    </div>
    <div class="nav-contact">
    <ul class="contact-nav">
                        <li><a href="/catalog.php">Каталог</a></li>
                        <li><a href="/about">О компании</a></li>
                        <li><a href="/dostavka">Доставка и оплата</a></li>
                        <li><a href="#download">Отзывы</a></li>
                        <li><a href="/contact.php">Контакты</a></li>
    </ul>
    </div>
    <div class="telefon">
                    <ul class="member-actions">
                        <li><h4>+375 (29) </h4></li>
                        <li><h4>+375 (33) ***-**-**</h4></li>
                        <li><h4>+375 (25) </h4></li>
                   </ul>    
    </div>
    <div class="telefon-gor">
                    <ul class="member-actions">
                        <li><h4>+375 (17) ***-**-**</h4></li>
                   </ul>    
    </div>            
</headr>

Стили относящиеся к данной шапке:

Скрытый текст

/* Header */

* { padding: 0; margin: 0; }

headr.page-header {

    left: 50px;

    content: '';

    display: inline-block;

    width: 100%;

    min-height: 20px;

    color: white;

    background: transparent;

}

 

.background {

padding: 0;

margin: 0;

  min-height: 450px;

  background: url("../img/hero.jpg") center center;

  background-size: cover;

  position: relative; }

}

 

.logo {

    margin: 0;

    position: fixed;

    left: 100px;

}

.telefon {

    position:relative;

    left: 850px;

    top: -80px;

    display: outline;

}

.telefon-gor {

    position:relative;

    left: 1050px;

    top:  -145px;

    display: inline;

}

.nav-contact {

    position: absolute;

    margin: 0;

    padding: 20px;

}

  headr .header-nav {

    display: inline-block; }

     

  headr ul.contact-nav {

    margin: 0 0 0 75px;

    padding: 0; }

    headr ul.contact-nav li {

    display: inline-block;

    position: relative;

    font-size: 13pt;

    top: -60px;

    left: 120px;

      }

      headr ul.contact-nav li a {

        color: #fff;

        padding-right: 25px; }

        headr ul.contact-nav li a:hover {

          color: #FF5274; }

      headr ul.contact-nav li:last-child a {

        padding-right: 0px; }

И если не помогло, все что я тут написал, может ссылка на сайт поможет?
Огромное спасибо всем, кто откликнется.

[WhatIsHTML]

Я вижу что у вас подключен бутстрап. Там вся адаптивность реализована, остается только подправить стили под свои потребности. Я бы советовал переделать его по-нормальному, чем исправлять плохо сделанное. Примеры меню на бутстрапе.

[WhatIsHTML]

<ul class="nav navbar-nav">
                                <li><a href="/catalog.php">Каталог</a></li>
                                <li><a href="/about.php">О компании</a></li>
                                <li><a href="/company.php">Доставка и оплата</a></li>
                                <li><a href="/contact.php">Контакты</a></li>
    							<li><h4>+375 (29) ***-**-** </h4></li>
  								<li><h4>+375 (33) ***-**-** </h4></li>
  								<li><h4>+375 (25) ***-**-** </h4></li>
  								<li><h4>+375 (17) ***-**-**</h4></li>
</ul>

Бегло просмотрел. Создали несколько списков class="nav navbar-nav", хотя все относится к одному меню,нет смысла создавать несколько. в бутстрапе есть два класса, которыми можно прижать элементы к правому краю :

1. pull-right - все равно что float:right, т.е. весь блок поедет вправо,

2. text-right - все равно что text-align: right; но тут надо чтобы элемент, который надо выровнять, был строчным или inline-block

[Erenbur]

Я в коде мягко говоря не очень  Но во всех адаптивных дизайнах видел что-то вроде max-width: auto;

[WhatIsHTML]

картинки выложите, чтобы понятнее было

P.S. Увидел ссылку на сайт

Вот смотрите

headr ul.contact-nav li {
    display: inline-block;
    position: relative;
    font-size: 13pt;
    top: -60px;
    left: 120px;
}

Если убрать top: -60px; left: 120px; то шапка станет на место. Еще здесь маргин можно уменьшить. Вообще,если резиновый макет, то для левой/правой стороны лучше задавать в % маргины и паддинги. И в целом лучше не писать селекторы с тегами, лучше так ".class" чем так "tag.class"

.page-header {
 margin: 60px 0 50px 50px;
}

 

И еще, не стоит увлекаться позиционированием. У вас его слишком много. Например зачем тут абсолютное позиционирование? Это просто меню, здесь можно обойтись и без него.

.nav-contact {
    position: absolute;
    margin: 0;
    padding: 20px;
}

 

Edited July 4, 2016 by WhatIsHTML

[MadSandwich]

Спасибо, что откликнулись, но после внесенных изменений у меня в браузере шапка сайта поехала, но уже некоторые части ее стали резиновыми.

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

p.s. извините забыл на какие хостинги нужно загружать картинки, загрузил на радикал.

p.s.s. картинка кликабельна, увеличивается при клике.

Edited July 5, 2016 by MadSandwich

[MadSandwich]

Через бутстрап, получается отличная шапка, спасибо. Вот только есть один нюансик, я не силен в редактировании бутстрапа, меня пугает его код)

Если не сочтете за наглость помогите поставить номера телефонов справа и так же их отобразить списком. Я попытался изобразить свои мысли в пэинте)

Страница сайта, на которой я работаю с шапкой на бутсрапе.

[MadSandwich]

Да они теперь отображаются справа, использовал класс pull-right, спасибо помогло. И теперь осталось только сделать номер который один, чтобы он был по центру тех 3 номеров. Как пример вот картинка, того что я хотел бы добиться.

[aditya56]

Этот пример - быстрое упражнение, чтобы проиллюстрировать, как работают стандартная, статическая панель навигации и фиксированная верхняя панель навигации. Включает в себя отзывчивый CSS и HTML

https://www.welookups.com/bootstrap/bootstrap_navbar.html