汉堡菜单没有出现

Question

我已经使用联系表单创建了一个联系页面，但是当我在移动设备上预览网站时，我的汉堡菜单没有出现。汉堡包正在其他页面上工作，联系人页面除外。这是我的代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Contact</title>
    <meta charset="utf-8">
    <meta name="description" content="Arina Matveeva Designer">
    <meta http-equiv="X-UA-Compatable" content="IE-edge">
    <link href='https://fonts.googleapis.com/css?family=BioRhyme+Expanded:300' rel='stylesheet' type='text/css'>
    <meta name="viepoint" content="width=device-width, user-scale=no, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/contact.css">
  <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
  <header>
    <a href="index.html" class="logo"><img src="img/logo1.png" id="logo" alt="logo"></a>
  <nav>
    <a href="#" class="hamburger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </a>
    <ul class="clearfix menu">
      <li><a class="active" href="contact.html">Contact</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </nav>
</header>

<img src="img/girl.png" class="girl">
<div id='contact_form_holder'>  
<form action='sent_email.php' method='post' id='contact_form'>  
<h2><img id='contact_logo' src='img/mail.png' /> Contact Me:</h2>  

<p class="your-name">  
Your Name:  
<div id='name_error' class='error'><img src='img/error.png'> Wrong name format. Enter correct name format.</div>  
<div id='name'><input type='text' name='name' id='name'></div>  
</p>  

<p class="mail">  
Your Email:  
<div id='email_error' class='error'><img src='img/error.png'> Wrong email fromat. Try again.</div>  
<div id="email"><input type='text' name='email' id='email'>  
</p>  

<p class="topic">  
The Subject:  
<div id='subject_error' class='error'><img src='img/error.png'> What is the purpose of the contact?</div>  
<div id="subject"><input type='text' name='subject' id='subject'></div>  
</p>  

<p class="text">  
The Message:  
<div id='message_error' class='error'><img src='img/error.png'> What do you want to ask me?</div>  
<div id="message"><textarea name='message' id='message'></textarea></div>  
</p>  

<div id='mail_success' class='success'><img src='img/success.png'> Thank you. The mail is on his way.</div>  
<div id='mail_fail' class='error'><img src='img/error.png'> Sorry, don't know what happened. Try later.</div>  
<p id='cf_submit_p'>  
<input type='submit' id='send_message' value='Send The Message'>  
</p>  

</form>  
</div>  

  <script src="js/contact.js"></script>
  <script src="js/vendor/jquery-1.11.2.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

Answer 1

非常宽泛的问题。但你可能会错过

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

过去，在尝试使媒体查询正常工作时，我不得不添加一些额外的属性。

汉堡菜单没有出现

Hamburger menu is not appearing

responsive-design

hamburger-menu