У меня есть несколько проблем с проектированием ответного заголовка

Ответ 1

Хорошо, поскольку я всегда говорил, что он быстрее, проще и, особенно, чище, НЕ использовать boostrap, когда вы хотите перевести свой дизайн в Интернет. Bootstrap - это инструмент, позволяющий быстро адаптировать веб-страницы под собственным дизайном Twitter. Это хорошо, но не чудесно. ЕСЛИ вы хотите, чтобы ваши собственные проекты на веб-сайтах вам НЕОБХОДИМО знать css, независимо от модифицированного бутстрапа или делать это с нуля (и если вы знаете css, то вы слишком сильно используете бутстрап).

Я начну с нуля.

Это проще, когда вы начинаете с вашего макета html без добавления ключевых элементов:

<header>
    <div class="container-menu-top">        
        <div class="menu-top">
            <div class="menu-top-center">
                <div class="icons-left">
                </div>
                <div class="container-login">
                    <div class="logo">
                    </div>
                    <div class="login">
                    </div>
                </div>
            </div>
            <div class="menu-top-right">
                <div class="social">
                </div>
                <div class="links">
                </div>
            </div>
        </div>
    </div>
    <div class="container-menu-bot">
        <div class="menu-bot">
        </div>
    </div>
</header>

И затем вы добавляете csss, чтобы правильно расположить макет (и лучше, если вы используете цвета, чтобы упростить проверку, все в порядке):

body {margin:0; padding:0;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container-menu-top {
    width:100%;
    background-color: aqua;
    height:160px;
}
.container-menu-bot {
    width:100%;
    background-color: aqua;
    height:60px;
    margin-top:40px;
}
.menu-top, .menu-bot {
    max-width:970px;
    width:100%;
    height:100%;
    background-color: green; 
    margin:0 auto;
    text-align:center;
    position:relative;
}
.menu-top-center {
    display:inline-block;
    background-color: red; 
    width:50%;
    height:100%;    
}
.menu-top-right {
    display:inline-block;
    float:right;    
    height:100%;
    background-color: violet; 
    width:150px; 
}
.icons-left {
    width:10%;
    float:left; 
    background-color: blue;
    height:100%;
}
.container-login {
    width:90%;
    float:left; 
    background-color: brown; 
    height:100%;
    text-align:left;
}
.logo {
    height:20%;
    background-color: orange;    
}
.login {
    height:80%;
    background-color: yellow;    
}
@media only screen and (max-width: 600px) {
    .menu-top-center {width: calc(100% - 150px);}
}

Как вы можете видеть в этом FIDDLE, все имеет смысл и реагирует просто добавлением одного line media queries. Социальная панель не изменит ширину так, чтобы ширина 600px (вы можете установить ширину разрыва желания), я изменил menú-top-center, чтобы получить всю родительскую ширину, но социальный контейнер. Обратите внимание, что я также сделал основной контейнер с максимальной шириной 970 пикселей (как в вашем примере).

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

Теперь пришло время разместить элементы внутри своих контейнеров html.

Значки слева от вашего логина, добавляющего изображения в html и css. Правильно, они находятся на контейнере, реагируя, чтобы изображения внутри изменяли их ширину при изменении размера окна. Если вы хотите фиксированный размер, то дайте контейнеру ширину на px и до container-login ширину с, снова width:calc(100% - yourwidthpx);:

.icons-left img {
    width:100%;
    display:block;
    padding:5px;
}

Ваше изображение "логотипа" в html с вашим желаемым размером (удаление теперь высоты его родителя):

.logo img {
    height:40px;
    width:253px;
    max-width:90%;
    display:inline-block;
}

Ваш логин inputs внутри логина div (удалив теперь высоту его родителя) и медиазапись, чтобы сделать его resposnive:

.login input, .login button {
    display:inline-block;
}
.login input {width:35%;}
@media only screen and (max-width: 600px) {
    .login input {width:100%;}
}

Ваши социальные иконки (рекомендую вам вставить их в список в html):

.social {}
.social ul {list-style:none;margin:0;}
.social li {
    height:30px;
    width:30px;
    float:right;
    background-color: blue;
    margin-left:4px; 
    margin-top:4px;
    background-repeat:no-repeat;
    background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}

Ваши ссылки:

.links {
    clear:both;
    text-align:left;
    margin-top:4px;
}
.links a {
    display:inline-block;    
}

Затем удалите высоты и фоновые цвета, и вот что: FIDDLE

Конечно, по-прежнему есть вещи, которые нужно сделать, чтобы создать свой проект, ведь это макет, я оставлю для вас работу:)

Если у меня будет время позже, я смогу завершить свое меню, пытаясь объяснить, как сделать его релевантным с помощью значка "burger".

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

Отредактировано ( "burger" menú):

Теперь давайте сделаем главное меню (основание на вашем изображении). Html легко:

<div class="container-menu-bot">
        <div class="menu-bot">            
            <ul id="">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
                <li><a href="#">Item5</a></li>
                <li><a href="#">Item6</a></li>
                <li><a href="#">Item7</a></li>
                <li><a href="#">Item8</a></li>
            </ul>
            <div class="burger"></div>
        </div>
</div>

Где burger - значок. Мы даем position:absolute этому контейнеру, и мы его скрываем с помощью display:none. Затем с помощью mediaqueries мы показываем значок, пока мы скрываем наш список. Нам также нужно изменить li’s от display:inline-block до display:block и, наконец, установить минимальную высоту в основной контейнер, поэтому, пока список скрыт, вы все еще имеете "зеленый" menú nav:

.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none; margin:0;}
.menu-bot li {
    display:inline-block;
    padding:10px 20px;
    border-left:1px solid #fff;
}
.menu-bot li:last-child {
    border-right:1px solid #fff;
}
.burger {
    width:25px;
    height:25px;
    background-color: red;
    position:absolute;
    top:7px;
    right:7px;
    display:none;
}
@media only screen and (max-width: 720px) {
    .burger {display:block;}
    .menu-bot ul {display:none;}
    .menu-bot li {display:block; border:0;}
}

Мы также добавим наш последний класс:

.menu-bot .visible {display:block;}

visible просто изменит отображение вашего списка, как только вы нажмете на значок гамбургера. Для этого вам просто нужен очень простой код jquery:

$(document).ready(function () {
            $('.burger').click(function () {
                $('.menu-bot ul').toggleClass("visible"); 
            });
        });

Это можно сделать только с помощью css и с помощью наведения с помощью hover, но я считаю, что это намного лучше, чем событие click, и ваши будущие пользователи, вероятно, будут иметь лучший опыт Вот и все. Довольно просто, легко понять и всего несколько строк css.

Финал FIDDLE. Удачи вам в вашем проекте

Ответ 2

Для начала, для меню стиля гамбургера на мобильных устройствах я настоятельно рекомендую FlexNav.

Теперь, большинство из того, что вы пытаетесь сделать, может быть достигнуто добавлением дополнительных div, я объясню:

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

В приведенном выше примере показано, что произойдет, если все контейнеры были сделаны float: left; в широкоэкранной точке останова.

Все элементы, которые вы хотите поместить рядом с другими элементами, должны находиться внутри одного контейнера. В вашем случае это означает, что в одном контейнере должен быть свой логотип, следующий контейнер должен иметь свой баннер, поля ввода и поле поиска, а последний контейнер должен содержать ваши социальные ссылки. Или, если вы хотите, чтобы социальные ссылки находились рядом с мобильным телефоном, вы можете использовать float: right; вместо float: left; и поместить их в более ранний контейнер.

Чтобы иметь элементы формы рядом друг с другом, им потребуется width 50% или меньше. Процентные показатели очень хорошо подходят для реагирования на них.

Наконец, если вы планируете делать много гибких тем, есть инструменты, которые могут быть немного сложными для настройки и обучения, но сделать весь процесс МНОГО более плавным, например:

• SASS (требуется Ruby или приложение)
• Сегменты уникальности
• Susy (аналогично Singularity)