Изменить навигационную панель bootstrap

Question

Я использую bootstrap для создания своего сайта. У меня есть типичная навигационная панель с опциями меню, но мне нужно изменить CSS, чтобы получить что-то вроде изображения ниже (это будет работать непрерывно на мобильном телефоне).

Изображение представляет ожидаемый результат.

<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
            <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="index.php"><img src="assets/img/img.png" width="152px"></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="index.php"></a>
                    <!-- menu options -->
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS используемый код: css из navbar - это класс по умолчанию, используемый в Boostrap.

.navbar-default {
    border-color: transparent;
    background-color: #1f3741;
    padding: 25px 0;
    border: 0;
    background-color: #ffffff;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}
.navbar-default-light{
    background-color: transparent;
}

.navbar-default .navbar-brand {
   font-family : Lato,"Helvetica Neue",Helvetica,Arial,cursive;
    color: #1676a9;  
    margin-top:-10px;
}
 .navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
    padding-top: 15px;
}    
.navbar-default .navbar-toggle {
    border-color: #1676a9;
    background-color: #1676a9;
}    
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}   
.navbar-default .nav li a {
    font-size: 16px;
    font-family: "Raleway", "Helvetica", sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 15px 10px;
    color: rgb(0, 0, 0);
}

.navbar-default-light .navbar-collapse {
    margin-top: 20px;
}
.navbar-default-light .nav li a {
    color: rgb(255, 255, 255);
}   
.navbar-default .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

Кто-нибудь может мне помочь?

Answer 1

Вот несколько перекрывающихся стилей для bootstrap классов, предназначенных для второго изображения .
Я надеюсь, что этот фрагмент ниже поможет вам во многом.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-default-light{
  border-color: transparent;
  border: none;
  background-color: #c3c3c3;
}
.navbar-default .navbar-brand {
  color: #1676a9;    
}
.navbar-default .navbar-collapse {
  border-color: rgba(255,255,255,.02);
}      
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  z-index: 2;
  position: relative;
  margin-left: 14px;
  height: 3px;
}   
.navbar-default-light .nav li{
  width: 100%;
  display: block;
  float: none;
  text-align: center;
}
.navbar-default-light .nav li a {
  line-height: 1.2;
  font-size: 16px;
  text-transform: uppercase;
  color: #000;
}   
.navbar-default-light .navbar-toggle{
  display: block;
  right: -15px;
  margin-right: 0px;
  position: absolute;
  border-radius: 0;
  border: none;
  background: #999;
  height: 100%;
  top: 0;
  width: 50px;
  outline: none;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
  overflow: hidden;
}
.navbar-default-light .navbar-toggle:hover{background: #999; opacity: 0.75}
.navbar-default-light .navbar-toggle:before{
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  top: 10px;
  left: -46.5px;
  background: #1676a9;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 0;
}
.navbar-right {
  float: none!important; 
  margin-right: 0px;
  top: 0;
  width: 100%;
}
.collapse.in, .collapsing{
  width: 100%!important;
  min-width: 100%;
}
.navbar-items{
  position: absolute;
  height: auto;
  background: #ccc;
  top: 50px;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  max-height: 250px;
}
@media(max-width: 767.98px){
 .navbar-default-light .navbar-toggle {
    right: -30px;
  }
}

<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header" style="position: relative; width: 100%;">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bscollapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand Name</a>
    </div>
    <div class="collapse navbar-collapse1 navbar-items" id="bscollapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Menu #1</a></li>
        <li><a href="#">Menu #2</a></li>
        <li><a href="#">Menu #3</a></li>
        <li><a href="#">Menu #4</a></li>
        <li><a href="#">Menu #5</a></li>
        <li><a href="#">Menu #6</a></li>
        <li><a href="#">Menu #7</a></li>
        <li><a href="#">Menu #8</a></li>
        <li><a href="#">Menu #9</a></li>
        <li><a href="#">Menu #10</a></li>
        <li><a href="#">Menu #11</a></li>
        <li><a href="#">Menu #12</a></li>
        <li><a href="#">Menu #13</a></li>
        <li><a href="#">Menu #14</a></li>
        <li><a href="#">Menu Last</a></li>
      </ul>
    </div>
	</div>
</nav>


<div style="min-height: 100vh; padding-top: 70px;">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Last Line...
				</p>
			</div>
		</div>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>