我想让我的bootstrap navbar-toggle显示内容,而不是将其推下来。我尝试了不同的技巧,包括这里发布的一些过去的解决方案,但仍然无法完成。我发现大多数人建议使用navbar-fixed-top对我不起作用。
.navbar {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
border-radius: 0px;
}
.navbar-brand {
width: 120px;
height: 120px;
}
.navbar-brand img {
width: 100px;
height: 100px;
}
/* LOGO ANIMATION */
@-webkit-keyframes rotate {
0%,
80% {
-webkit-transform: rotate(0deg);
}
90%,
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0%,
80% {
transform: rotate(0deg);
}
90%,
100% {
transform: rotate(360deg);
}
}
#logo {
-webkit-animation: rotate 5s infinite linear;
-moz-animation: rotate 5s infinite linear;
-o-animation: rotate 5s infinite linear;
-ms-animation: rotate 5s infinite linear;
animation: rotate 5s infinite linear;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.navbar-right {
padding-top: 20px;
}
.navbar-default .navbar-nav>li>a {
color: #07d4de;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
background-color: #07d4de;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background-color: #07d4de;
color: white;
}
.navbar-default .navbar-toggle {
border-color: #07d4de;
}
.navbar-default .navbar-toggle:hover {
background-color: #07d4de;
}
.navbar-toggle {
margin-top: 30px;
height
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #07d4de;
text-align: center;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #07ded4;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<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" id="logo" href="index.html"><img src="img/logo9.png" alt="Logo"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Hire Me</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div id="myname">
<h1 class="quotes">I am <span style="color: #07d4de">Creative</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Smart</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Awesome</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Olawale</span></h1>
</div>
</section>
答案 0 :(得分:0)
我想你想要这样
.navbar {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
border-radius: 0px;
}
.navbar-brand {
width: 120px;
height: 120px;
}
.navbar-brand img {
width: 100px;
height: 100px;
}
/* LOGO ANIMATION */
@-webkit-keyframes rotate {
0%,
80% {
-webkit-transform: rotate(0deg);
}
90%,
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0%,
80% {
transform: rotate(0deg);
}
90%,
100% {
transform: rotate(360deg);
}
}
#logo {
-webkit-animation: rotate 5s infinite linear;
-moz-animation: rotate 5s infinite linear;
-o-animation: rotate 5s infinite linear;
-ms-animation: rotate 5s infinite linear;
animation: rotate 5s infinite linear;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.navbar-right {
padding-top: 20px;
}
.navbar-default .navbar-nav>li>a {
color: #07d4de;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
background-color: #07d4de;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background-color: #07d4de;
color: white;
}
.navbar-default .navbar-toggle {
border-color: #07d4de;
}
.navbar-default .navbar-toggle:hover {
background-color: #07d4de;
}
.navbar-toggle {
margin-top: 30px;
height
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #07d4de;
text-align: center;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #07ded4;
}
@media screen and (max-width:767px){
.navbar .navbar-collapse {
background: #f8f8f8;
position: absolute;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
<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" id="logo" href="index.html"><img src="img/logo9.png" alt="Logo"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Hire Me</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div id="myname">
<h1 class="quotes">I am <span style="color: #07d4de">Creative</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Smart</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Awesome</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Olawale</span></h1>
</div>
</section>