モバイルビューの画面の下部にナビゲーションバーを固定する方法>

Question

現在デスクトップ上に表示しているときにナビゲーションバーとしてサイドバーがあります。デスクトップでは、ビュー、アイコンとテキストが左側にアイコン、右側にテキストが並んで表示されます。

モバイルビューに折り畳まれたときにサイドバーが画面の下部に固定されているナビゲーションバーに倒れるようにしていました。アイコンはテキストの上の中央に表示されます。

これは私が持っているもの現在：http://codepen.io/anon/pen/bpRgEJ

はこれが一番下に配置するために取得しようとしているために私のコードです：

@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%; 
    } 
} 

それは、現在のトップナビゲーションバーに崩壊し、アイコンおよびテキストは、上下ではなく横に並んでいます。

ありがとうございます、ありがとうございます！

Answer 1

まず、私はあなたが以下のようにあなたのCSSを整理することをお勧め一定の幅である。

だから、あなたは常に固定されているナビゲーションバーが必要ですが、デスクトップ画面の左側に位置され、移動のためのページの一番下にある場合、あなたはこのような何か書く必要があります。

.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%; 
    } 
} 

を

このようにして、一致しないルールを回避することができます。 Codepenにフォーク

.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; 
    } 
} 

はあなたの例：

あなたの完全なCSSは次のようになりますhttp://codepen.io/xWaZzo/pen/BKZpQE

Answer 2

これはトリックを行う必要があります。

#myNavbar { 
     position: relative; 
    } 

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

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

Answer 3

あなたはトップ削除する必要があります。

.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); 
} 

から0

またメディアクエリクラスの高さを上げる

@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%; 
} 
} 

を希望これはあなたがしたいのですか？唯一の動作に影響を与えるすべて

2.-メディアクエリーに影響を与えるルールに

1.-一般セレクタとclases：すべての