настольных нав бар липкие сверху мобильный бар нав липкое дно

Question

Я использую Skeleton как мои основы CSS

В настоящее время у меня есть панель навигации, которая прилипает к верхним в ПК зрения рабочего стола (то есть, страница прокручивается под ним). Вот код:

<div style="height:50px"> 
<div id="fixed-nav-bar"> 
    <div class="container" id="nav"> 

    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

    </div> 
</div> 
</div> 



#fixed-nav-bar { 
     position:fixed; 
     top: 0; 
     left: 0; 
     z-index: 9999; 
     width: 100%; 
     height: 50px; 
     background-color:linen; 
    } 

#nav ul { 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    list-style-type: none; 
    text-align: center; 
    } 

#nav ul li { 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    } 

Моего вопрос: Как я могу сделать так, чтобы при просмотре на мобильном устройстве (т.е. телефона), СЧ полоса перемещается к нижней части (чтобы легко использовать в одной руке режим) и остается липким?

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

Answer 1

Вот мое решение: с bottom:0; вы получите #fixed-nav-bar в нижней части страницы. Просто замените 960px на выбранную ширину устройства, которое вам не нужно: #fixed-nav-bar, чтобы идти в низу.

@media screen and (max-width: 960px) { 
    #fixed-nav-bar { 
     top: inherit; 
     bottom: 0; 
    } 
}