Отзывчивый nav tweak

Question

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

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

Я не уверен, что мне просто нужно взять это меню и поместить его в свой собственный div вне навигатора, или если я просто забуду какое-то правило css. Это в настоящее время настроен как:

<nav> 
<div id="nav-div"> 
    <div id="title"></div> 
    <div id="menu-toggle"></div> 
    <div id="nav-links"> 
    <ul> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 2</a></li> 
    <li><a href="#">link 3</a></li> 
    </ul> 
    </div> 
</div> 
</nav> 

CSS:

#nav-links { 
    position:absolute; 
    width:100%; 
    ul { 

    } 
    li { 
    display:block; 
    float: none; 
    border-bottom: 1px solid black; 
    &:last-child { 
     border-bottom: none; 
    } 
    a { 

    } 
    } 
} 

Answer 1

Вам нужно установить top и left свойства на #nav-links. И если вы также установили right, вам не понадобится width: 100%. Также сделайте это position:relative. Как это:

#nav-div { 
    position: relative; 
    height: 50px; 
} 
#nav-links { 
    position:absolute; 
    left: 0; 
    right: 0; 
    ... 
} 

Изменение 50px на то, что ваш рост Navbar есть.

Answer 2

Как я в конечном итоге делает это:

ul { 
    position: absolute; 
    width: 100%; 
    right: 0px; 
    left: 0px; 
    li { 
    width: 100%; 
    a { 
     width: @small-width; //defined with my variables 
     margin: 0px auto; 
     display: block; 
    } 
    } 
}