css - 更改导航栏引导程序

Question

我正在使用引导程序来构建我的网站。我有一个带有菜单选项的典型导航栏，但我需要更改 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 使用代码：navbar类的 css 是 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;
}

任何人都可以帮助我吗？

标签： cssbootstrap-4

Answer 1

这是为第二个图像设计的引导类的一些重叠样式。我希望下面的剪辑对你有很大帮助。

@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>