Question

这是我的index.php脚本。当我点击菜单图标显示导航栏时，似乎什么也没发生。当我点击它时，导航菜单应该下拉。但这并没有发生

    <?php

       session_start();

       ?>

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" contents="IE-Edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Blank</title>
 <meta name="description" content="BLANK">
 <meta name="keywords" content="BLANK">
 <meta name="author" content="blank">

 <link href="img/favion.ico" rel="shortcut icon">
 <link href="img/apple-touch-icon.png" rel="apple-touch-icon">
 <link href="img/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
 <link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="114x114">
 <link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="114x114">

 <link rel="stylesheet" href="bootstrap.css">
 <link rel="stylesheet" href="styles.css">
 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">




</head>

<body>

  <header class="header" role="navigation"> 
<nav class="navbar navbar-default">
 <div class="container-fluid"> 
  <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
    </button>


      <div>
  <figure class="logo--main">
    <a href="index.php">
      <img src=img/Logo_2_Design.png width="80"/>
    </a>
  </figure>
  <figure class="logo--sticky">
      <a href="index.php">
      <img src=img/Logo_2_Design_white_black.png   width="80"/>
      </a>
   </figure>
</div>


  </div>
  <div class="navbar-collapse collapse" id="#myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.php">Home</a></li>

      <li><a href="explore.php">Explore</a></li>
      <li><a href="community.php">Community</a></li>
     <li><a href="signup.php">Sign Up</a></li>
      <li><a href="login.php">Login</a></li>
      <li><a href="help.php">Help</a></li>

    </ul>




  </div>
</div>

这是我的导航CSS

   a {
  padding-bottom: .2em;
  color: #000;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease-in-out;
  text-decoration: none;
  color: #000;
}

a:hover {
  border-bottom: 1px solid;
}
.sticky a {
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease-in-out;
  color: #fff;
}

.sticky a:hover {
  border-bottom: 1px solid;
}
.logo--main a, .logo--sticky a {
  border-bottom: 0;
}

.header {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25em 0;
  z-index: 999;
  transition: padding .8s ease-in-out;
   }
.header nav {
  flex: 1;
   }
.header nav ul {
  display: flex;
  list-style-type: none;
  padding: 30px; 
   }
.header nav ul li {
  margin-right: 2em;
  }
.header nav ul li:last-child {
  margin-right: 0;
  }

.header div {
  flex: 1;
  text-align: center;

  }
/*Move the logo*/
.header div img {
  display: inline-block;

  }
.header div .logo--sticky {
  display: none;

  }
.header.sticky {
  position: fixed;
  top: 0;
  padding: 1em 0;
  background-color: #000;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  }

section {
  align-self: flex-end;
  width: 100%;
  text-align: center;
  }

h1 {
  margin-bottom: 1em;
 font-size: 3em;
  }


h6 {
  font-size: 1.5em;
    color: black;
    text-align: center;
    margin-left: 7.5px;
    margin-right: 7.5px;
  }


.slide-down {
  animation: slide-down ease-in-out .6s .1s both;
  }

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    }
  100% {
    opacity: 1;
    transform: translateY(0%);
    }
}

 font-style: normal;
 font-weight: 400;
 }


.header input [type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
  }

我不确定它是否正在显示但是因为某些内容覆盖它而被隐藏

当我点击我的菜单图标时，导航不会下拉

0 个答案: