更改导航栏引导

时间：2020-01-05 20:36:07

标签： css bootstrap-4

我正在使用引导程序来构建我的网站。我有一个带有菜单选项的典型导航栏，但我需要更改CSS才能产生如下图所示的图像（它将在移动设备上继续工作）。

expected result

图像代表预期结果。

<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中使用的默认CSS。

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

有人可以帮助我吗？

1 个答案:

答案 0 :(得分：0)

这是引导类上的一些 重叠 样式，用于设计第二张图片。
希望以下内容能对您有所帮助很多。

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

相关问题
最新问题