html - 在我的主导航栏上方添加社交导航栏

Question

我正在尝试让我的社交导航栏位于我已经实现的主导航栏上方，但我现在面临的问题是页面的主要内容与导航栏重叠。 如果我向正文添加填充，它只会使导航栏向下移动页面。

我一辈子都找不到问题所在..抱歉，我现在正在学习，所以请不要太苛刻。任何帮助将不胜感激。

body {
  padding: 50px;
}

.topnav {
  text-align: right;
  font-family: 'Quicksand', sans-serif;
  background: #f4f5eb;
  padding: 0 20px;
  margin: 0;
  overflow: hidden;
}

.social li {
  text-align: right;
  list-style: none;
  display: inline-block;
}

a {
  text-decoration: none;
  padding: 0 10px;
  color: grey;
  font-size: 15px;
}

a:hover {
  color: rgb(17, 240, 17);
}

.social1 {
  font-size: 10px;
  color: black;
  padding: 5px;
}

.main-nav {
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  padding: 0 40px;
  margin: 0;
  overflow: hidden;
  padding: 15px;
  float: left;
}

.main li {
  text-align: center;
  list-style: none;
  display: inline-block;
}

.main1 {
  color: black;
}

#logo {
  float: left;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 7 !important;
}

.dropdown-content a {
  color: grey;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: rgb(17, 240, 17);
}

.dropdown:hover .dropdown-content {
  display: block;
}

<header>
  <nav class="topnav">
    <div class="topnav-social">
      <ul class="social">
        <li><a href="https://www.egis-group.com/social-wall">Social Wall</a></li>
        <li>
          <a href="https://www.egis-group.com/rss.xml" i class="fas fa-rss"></i>
          </a>
        </li>
        <li>
          <a href="https://vimeo.com/channels/egis" i class="fab fa-vimeo-v"></i>
          </a>
        </li>
        <li>
          <a href="https://www.youtube.com/channel/UC7htuNSYHgMDr5wkoQMD8lQ" i class="fab fa-youtube"></i>
          </a>
        </li>
        <li>
          <a href="https://twitter.com/egis" i class="fab fa-twitter"></i>
          </a>
        </li>
        <li>
          <a href="http://www.linkedin.com/company/egis" i class="fab fa-linkedin-in"></i>
          </a>
        </li>
        <li>
          <a href="http://fr.viadeo.com/fr/company/egis?gaid=2012012300803" i class="fab fa-viadeo"></i>
          </a>
        </li>
        <li>
          <a href="https://www.facebook.com/egisgroup" i class="fab fa-facebook-f"></i>
          </a>
        </li>
        <li><a class="social1" href="https://www.egis-group.com/talent/join-us" target="_blank">Join Us</a></li>
        <li><a class="social1" href="https://www.egis-group.com/contact" target="_blank">Contact</a></li>
        <li><a class="social1" href="https://www.egis-group.com/publications" target="_blank">Publications</a></li>
      </ul>
    </div>
  </nav>
  <div id=logo>
    <a href="http://egism40.com"><img src="images/logo.jpg" width="350" height="100" alt="Brand"></a>
  </div>
  <nav class="main-nav">
    <div class="mainnav-head">
      <ul class="main">
        <li><a class="main1" href="index.php">Home</a></li>
        <?php if((isset($_SESSION['username']) || isCookieValid($db))): ?>
        <li><a href="profile.php">my profile</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="dropbtn">Skills By Shift</a>
          <div class="dropdown-content">
            <a href="pages/tm.php">Traffic Management</a>
            <a href="#">Lead Installers/Fiss</a>
            <a href="#">Licenses</a>
            <a href="#">Other Skills</a>
          </div>
        </li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="dropbtn">Risk Assessments/Method Statements</a>
          <div class="dropdown-content">
            <a href="pages/tm.php">Traffic Management</a>
            <a href="#">VSF/Barrier</a>
            <a href="#">C'way Repairs</a>
            <a href="#">Equiptment</a>
          </div>
        </li>
        <li><a href="logout.php">Logout</a></li>

        <?php else: ?>
        <li><a class="main1" href="">Blog</a></li>
        <li><a class="main1" href="">About</a></li>
        <li><a class="main1" href="">Egis Projects</a></li>
        <li><a class="main1" href="login.php">Login</a></li>
        <?php endif ?>
      </ul>
    </div>
  </nav>
</header>

Answer 1

您可以使用 flexbox 实现这一点。

<div class="full-nav-wrapper">
  <div class="social-nav-wrapper">
    <div class="social-nav-left">
      <a href="#">Social Wall</a>
    </div>
    <div class="social-nav-right">
      <a href="#">Join Us</a>
      <a href="#">Contact</a>
      <a href="#">Publications</a>
    </div>
  </div>
  <div class="main-nav-wrapper">
    <div class="main-nav-logo">
      <img src="https://via.placeholder.com/140x100">
    </div>
    <div class="main-nav-links">
      <a href="#">Home</a>
      <a href="#">My Profile</a>
      <a href="#">Skills By Shift</a>
      <a href="#">Risk Assessments/Method Statements</a>
      <a href="#">Logout</a>
      <a href="#">Blog</a>
      <a href="#">About</a>
      <a href="#">Egis</a>
      <a href="#">Projects</a>
      <a href="#">Login</a>
    </div>
  </div>
</div>

CSS

a {
color:white;
}

.full-nav-wrapper {
  border:2px solid purple;
}
.social-nav-wrapper {
  background-color:blue;
  display:flex;
  justify-content: space-between;
}
.social-nav-left {

}
.social-nav-right {

}

.main-nav-wrapper {
  background-color:pink;
  display:flex;
  justify-content: space-between;
  align-items:center;

}
.main-nav-logo {
    display:flex;
  flex-grow: 1;
}

.main-nav-logo > img {
    width: 50px;
    height: 50px;
}

.main-nav-links {
  display:flex;
  justify-content: space-around;
  flex-grow:3;
}

虽然链接很多，因此您需要采用响应式技术才能在移动设备上正确显示。

@media (max-width:767px) {
  .main-nav-wrapper {
    flex-wrap: wrap;
  }
  .main-nav-links {
    display: flex;
    justify-content: space-around;
  }
  .main-nav-logo {
    justify-content: center;
  }
  .main-nav-links {
    flex-wrap: wrap;
}
}

我认为这就是您想要实现的目标。 我对 div 进行了着色，以便您可以返回并可能了解我所做的事情。 如果您觉得这段代码有点容易理解，请学习 flexbox。

代码笔:https://codepen.io/nolaandy/pen/OqarXY