Mobil görünüm için ekranın alt kısmına nav çubuğu nasıl sabitlenir>

Question

Şu anda masaüstünde görüntülerken gezinti çubuğu olarak kenar çubuğum var. Masaüstünde görünüm, simgeler ve metin soldaki simgeler ve sağdaki metinle yan yanadır.

Mobil görünüme düştüğünde, ekranın altına sabitlenen bir kenar çubuğuna daraltmak için kenar çubuğunu kaldırmaya çalışıyorum. Üstündeki simgeler ve metnin altında ortalanmış.

Bu Ne sahip şu anda: Bu altta konumlandırmak için almaya çalışırken benim kod http://codepen.io/anon/pen/bpRgEJ

: Günümüzde bir üst gezinme çubuğunda içine çöker

@media (max-width:35em) { 

    .main-nav { 
     background: #ECC264; 
     border-right: 1px solid #e5e5e5; 
     position: fixed; 
     margin: 0; 
     left: 0; 
     bottom: 0; 
     height: 5em; 
     width: 100%; 
    } 
} 

ve simgeler ve metin üst ve alt olmaktan ziyade yan yanadır.

Herhangi bir yardım için teşekkür ederiz, teşekkürler!

Answer 1

Öncelikle ben aşağıdaki gibi CSS organize etmek önermek belirli genişlik için.

Böylece her zaman sabit bir navbar gerekir, ancak masaüstü için ekranın sol tarafında konumlandırılmış ve mobil cihazlar için sayfanın alt kısmında ise böyle bir şey yazmalıyım:

.sidebar{ /* Every rule that will be always visible, something like colors, fonts, etc. */ 
    background-color: yellow; 
    position: fixed; 
} 

@media(min-width:35.1em){ /* Larger than mobile devices */ 
    .sidebar{ 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 40px; 
    } 
} 

@media(max-width:35em){ /* Breakpoint only for mobile */ 
    .sidebar{ 
    bottom: 0; 
    width: 100%; 
    } 
} 

Bu şekilde, birlikte eşleşmeyen kurallarla uğraşmaktan kaçınacaksınız.

Eksiksiz CSS gibi görünmelidir:

Sizin örnek Codepen içinde çatallı

.fa-2x { 
    font-size: 2rem; 
} 
.fa { 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    font-size: 2rem; 
} 

.main-nav { 
    background: #ECC264; 
    border-right: 1px solid #e5e5e5; 
    position: fixed; 
    z-index: 1000; 
} 
.main-nav>ul { 
    margin: 0rem 0rem; 
} 

nav ul, 
nav li { 
    outline: 0; 
    margin: 0; 
    padding: 0; 
} 
.main-nav li:hover>a, 
nav.main-nav li.active>a{ 
    color: #fff; 
    background-color: #919191; 
} 

.main-nav .nav-text, .main-nav li>a{ 
    font-family: 'Roboto', sans-serif; 
} 

.main-nav li>a { 
     border-collapse: collapse; 
     border-spacing: 0; 
     color: white; 
     font-size: 1.03rem; 
     text-decoration: none; 
} 

@media (min-width:35.1em) { 
    .fa{ 
    display: table-cell; 
    width: 5rem; 
    height: 5rem; 
    } 

    .main-nav:hover, 
nav.main-nav.expanded { 
    width: 15em; 
    overflow: visible; 
} 

    .main-nav{ 
    top: 0; 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    width: 5rem; 
    overflow: hidden; 
    -webkit-transition: width .05s linear; 
    transition: width .05s linear; 
    -webkit-transform: translateZ(0) scale(1, 1); 
    } 

    .main-nav li { 
    position: relative; 
    display: block; 
    width: 18rem; 
    } 
    .main-nav li>a { 
     position: relative; 
     display: table; 
     -webkit-transform: translateZ(0) scale(1, 1); 
     -webkit-transition: all .1s linear; 
     transition: all .1s linear; 
    } 

    .main-nav .nav-text { 
     position: relative; 
     display: table-cell; 
     vertical-align: middle; 
     width: 10rem; 
    } 
} 


@media (max-width:35em) { 

    .main-nav { 
     background: #ECC264; 
     border-right: 1px solid #e5e5e5; 
     position: fixed; 
     margin: 0; 
     left: 0; 
     bottom: 0; 
     /*height: 5em;*/ 
     width: 100%; 
    } 

    .main-nav ul{ 
    display: table; 
    width: 100%; 
    } 

    .main-nav li{ 
     float: left; 
     width: 25%; 
     list-style-type: none; 
     text-align: center; 
    } 

    .main-nav a{ 
    display: block; 
    padding: 5px; 
    height: 74px; 
    } 

    .main-nav i, .main-nav span{ 
    display: block; 
    } 

    .main-nav span{ 
    font-size: 14px; 
    } 
} 

: http://codepen.io/xWaZzo/pen/BKZpQE

Answer 2

Bu hile yapmalıdır.

#myNavbar { 
     position: relative; 
    } 

    #myNavbar .nav { 
     position: absolute; 
     bottom: 0; 
     right: 0; 
     margin-bottom: -10px; 
    } 

http://jsfiddle.net/DTcHh/1819/

Answer 3

Üst kaldırması gerekir: 0

.main-nav { 
background: #ECC264; 
border-right: 1px solid #e5e5e5; 
position: fixed; 
/*top: 0;*/ 
bottom: 0; 
height: 100%; 
left: 0; 
width: 5rem; 
overflow: hidden; 
-webkit-transition: width .05s linear; 
transition: width .05s linear; 
-webkit-transform: translateZ(0) scale(1, 1); 
} 

den Ayrıca

@media (max-width:35em) { 

.main-nav { 
background: #ECC264; 
border-right: 1px solid #e5e5e5; 
position: relative; 
margin: 0; 
left: 0; 
bottom: 0; 
height: 20em; 
width: 100%; 
} 
} 

Umut bunun istediğiniz medya sorgu sınıfında yüksekliğini artırmak? Sadece davranışını etkileyen her şey

2.- Medya Sorguları etkileyecek kurallara

1.- Genel seçicileri ve clases: Herşeyden