Исправлена ​​навигация с двумя рядами?

Question

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

На данный момент мой второй ряд скрыт за моей первой?

.navbar-default { 
 
    font-family: "Roboto", sans-serif; 
 
    background: #f9f9f9; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-top: none; 
 

 
    text-transform: uppercase; 
 
    -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -khtml-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -ms-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -webkit-transition: all 0.25s ease-out; 
 
    -moz-transition: all 0.25s ease-out; 
 
    -ms-transition: all 0.25s ease-out; 
 
    -o-transition: all 0.25s ease-out; 
 
    transition: all 0.25s ease-out; 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    margin: 0 20px; 
 
    padding: 10px 15px; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    color: #D13030; 
 
    font-weight: 700; 
 
    letter-spacing: .02em; 
 
    -webkit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -ms-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    -moz-transition: all 0.2s ease-out; 
 
    -ms-transition: all 0.2s ease-out; 
 
    -o-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover { 
 
    background-color: #E74C3C; 
 
    color: #f9f9f9; 
 
    outline: none; 
 
    -webkit-transition: background-color 0.15s linear; 
 
    -moz-transition: background-color 0.15s linear; 
 
    -ms-transition: background-color 0.15s linear; 
 
    -o-transition: background-color 0.15s linear; 
 
    transition: background-color 0.15s linear; 
 
}

<!-- NAVIGATION BAR --> 
 
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
 
    <div class="container text-center"> 
 
     <div class="row"> 
 
     <a href="about.html"> 
 
      <div class="col-sm-3" id="about-tab">About</div> 
 
     </a> 
 
     <a href="specifying.html"> 
 
      <div class="col-sm-3" id="about-tab">Specifying</div> 
 
     </a> 
 
     <a href="market-sectors.html"> 
 
      <div class="col-sm-3" id="about-tab">Market Sectors</div> 
 
     </a> 
 
     <a href="about.html"> 
 
      <div class="col-sm-3" id="about-tab">Shop</div> 
 
     </a> 
 
     </div> 
 
    </div>

Answer 1

Смотреть я не мог найти 8 вариант в вашем navbar, но поместить его в нижней части страницы, вы можете использовать код, как показано ниже. Добавьте это в navbar-default

.navbar-default { 
position:fixed; 
bottom:0; 
} 

Answer 2

Если я правильно понимаю ваш вопрос, вы хотите, 2 строки в нижней части страницы справа?

<div class="first-row"> 
    <button>menu1</button> 
    <button>menu2</button> 
    <button>menu3</button> 
    <button>menu4</button> 
</div> 
<div class="second-row"> 
    <button>menu5</button> 
    <button>menu6</button> 
    <button>menu7</button> 
    <button>menu8</button> 
</div> 

в CSS:

.first-row{ 
    position:fixed; 
    height:50px; /*or anything you like*/ 
    bottom: 100px; 
} 
.second-row{ 
    position:fixed; 
    height:50px; /*or anything you like*/ 
    bottom: 50px; 
} 

В 2 строки будут находиться на нижней части страницы.