html - 如何让我的 bootstrap navbar-toggle 覆盖内容？

Question

我正在尝试让我的 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>

Answer 1

我想你是这样的

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