我的fa-bar没有显示-响应式顶部导航

时间：2019-01-28 01:30:16

标签： html css drop-down-menu responsive-design navbar

所以我在这里稍微调整一下齿轮。我为菜单创建了一个响应式导航栏，但是不幸的是，当它处于移动形式时，它没有在菜单栏中显示标题。对于我的导航栏更新，我复制并粘贴了W3schools的代码，然后对其进行了一些修改。我打算以后更改颜色。

现在，我唯一的问题是，进入响应模式时， fa fa-bars 没有显示。 为什么？？这是我从中获得响应式导航栏的地方。 https://www.w3schools.com/howto/howto_js_topnav_responsive.asp。

告诉我我想念的是什么。谢谢。 您可以运行下面的代码片段以查看我在说什么。 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.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: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

</body>

</html>

要回复 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.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: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* This is the part that messed up my styling for my home page which 
    which I previously was pleased with before. */

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>



  <span>
    <div class="summary">
      <div class="profilePicture">
        <img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
      </div>
      <div class="profileSummary">
        Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently
        and.
      </div>
    </div>
  </span>


</body>

</html>

2 个答案:

答案 0 :(得分：1)

您缺少<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">。如果您使用的是超棒的字体，请不要忘记使用相关的CSS。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.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: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

</body>

</html>

答案 1 :(得分：0)

包含

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

在您</head>之前的

相关问题
最新问题