Question

我一直在尝试为正在创建的页面创建页眉和导航，但是导航显示为隐藏或未显示。

我已经尝试过将position和top属性添加到CSS代码中，但是没有成功。

   <!DOCTYPE html>
    <html>
      <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs    /font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0    /css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/social.css">
    <link rel="stylesheet" href="css/nav.css">
    <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .topnav {
       overflow: hidden;
      background-color: #333;
    }
    .topnav a {
       float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px; 
    }

    .topnav a:hover {
      background-color: #cc0066;
      color: black;
    }

        .active {
      background-color: #cc0066;;
      color: white;
    }

        .topnav .icon {
      display: none;
    }

    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }

    </style>
    </head>

    <header id="header-full-top" class="header-full hidden-xs">
      <div class="columns">
       <ul class="price">
         <li class="header"><img src="img/logo1.png" width="75%"></li>
       </ul>
     </div>
     <div class="columns">
      <ul class="price">
        <li class="header"><img src="img/slogan2.png" width="40%"></li>
      </ul>
    </div>
    <div class="columns">
      <ul class="price">
        <li class="header"><a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a><a href="#" class="fa fa-linkedin"></a></li>
      </ul>
    </div>
    </header>
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="sellers.html">Sellers</a>
      <a href="buyers.html">Buyers</a>
      <a href="information.html">Information</a>
      <a href="testimonials.html">Testimonials</a>
      <a href="#contact.html">Contact</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>

    <div style="padding-left:16px">
      <h2>Main content title</h2>
      <p>main content </p>
    </div>

    <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
   </script>

    </body>
    </html>

我希望导航显示在标题图像下方。

social.css代码：

/* table */
 * {
   box-sizing: border-box;
 }

/* Create three columns of equal width */
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

/* Style the list */
.price {
  list-style-type: none;
  border: 0px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
  background-color: transparent;
  color: white;
  font-size: 25px;
}


/* List items */
.price li {
  border-bottom: 1px solid transparent;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

/* The "Sign Up" button */(mot used)
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}


/*icons*/
.fa {
  margin: 15px 0 0 30px;
  padding: 20px ;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
 }

 .fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;

}
.fa-linkedin {
  background: #007bb5;
  color: white;

}

缺少导航的屏幕截图： screenshot

Answer 1

标题是重叠的，因此您应该将display属性设置为＃header-full-top {display：flex;}

如何在CSS中重新定位响应式导航

}

1 个答案: