Каким способом реализовать элемент в адаптивной верстке?

Question

[Денис Ильясов]

Здравствуйте! Начал изучать адаптивную верстку и появился вопрос как лучше реализовать элемент, к сожалению более опытных товарищей нету.
Я использую грид 1140px. Необходимо реализовать следующие элементы:

Я реализовал это следующим образом:

<div class="header">
            <div class="container12">
                <div class="column6 logo">
                    <div class="title">WEBFOLIO</div>
                    <div class="description">My Web Design Portfolio</div>
                </div>
                <div class="column6 nav">
                    <ul>
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT ME</a></li>
                        <li><a href="#">WORKS</a></li>
                        <li><a href="#">RESUME</a></li>
                    </ul>
                </div>
            </div>
        </div>

В мобильной версии сайта, необходимо реализовать следующим образом:

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

Comments

[Сергей Громов]

мб код покажите css.. ?

Answer 1

[GreatRash]

Я бы сделал два меню и скрывал/показывал их в зависимости от разрешения.

Comments

[Денис Ильясов]

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

[George The Hipster]

Для адаптивной - вполне нормально.

Answer 2

[ultrbi4]

а бордер идет во всю ширину контейнера (с отступами) или вообще во всю ширину страницы?

Comments

[Денис Ильясов]

Во всю ширину страницы

[ultrbi4]

Денис Ильясов: а контейнер разве не становится во всю ширину экрана?

[Денис Ильясов]

ultrbi4: Неа, там вот так:

.container12, .container16 {
margin:0 auto;
padding:0;
position:relative;
width:1140px;
}

[ultrbi4]

Денис Ильясов: ну тогда тебе нужно выносить этот элемент за эти контейнеры, если там нет резиновости, либо делать псевдо элемент и растягивать его на "неприличные" отрицательные отступы влево и право (и делать для body overflow: hidden) но это плохой вариант )))

[Денис Ильясов]

ultrbi4: спасибо за ответ, значит я правильно думал)