尝试将搜索合并到响应式菜单中时出现问题

Question

我正在尝试制作响应式菜单 - 我对桌面版很满意，但我搞砸了移动版。

在小于 600 像素的屏幕上，如何让搜索栏出现在汉堡包中（最好是在顶部，搜索图标在文本框旁边）而不是在该行下方？

（我也在尝试使菜单栏变粘，并仅在 600 像素以下用徽标替换主页，但一次只能做一件事...）

任何帮助感激不尽，感激不尽，感激不尽。非常感谢！

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

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

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.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;
  }

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */

<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <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="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––>
      <div class="header">
      Title
      </div>
    
      <! –– menu ––>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––>
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––>
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

Answer 1

第一件事是你有 2 个最大宽度的媒体查询 600 像素。设置一个就够了
然后我在 class 中添加了您的 600px 视图：.topnav a:not(:first-child) 就像 .topnav a:not(:first-child), .topnav .search-container 这样，它将像其他块一样工作超过。就像搜索栏也会 display none
然后我将 .topnav.responsive .search-container 添加到现有的 .topnav.responsive a 显示。并添加了设置搜索栏的命令在上面

  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child, .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }

为了使 order 正常工作，我还需要将 display flex 添加到如下所示的容器中

.topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }

演示

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

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

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .topnav .search-container {
    display: none;
    }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a,
  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child,
  .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */

<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <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="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––>
      <div class="header">
      Title
      </div>
    
      <! –– menu ––>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––>
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––>
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

Answer 2

我更新了您的代码段以修复搜索栏和粘性菜单。

同一个 @media 查询被多次使用。请尝试将所有代码放在一个媒体查询 @media screen and (max-width: 600px) 下，一个媒体查询足以用于 600px 视口。这对于干净和语义化的代码更好。

总是，应该显示搜索栏。看专业UI https://miro.medium.com/proxy/1*ILvNVFYka8q04RrsHTvkKA.png搜索栏不应该在汉堡。应该相当于汉堡和家。

请在 CSS 下面 update/add 解决 @media screen and (max-width: 600px) 末尾的问题。

你只需要更新这个CSS。

.topnav .search-container {
    position:absolute;
    left: 74px;
    top:0px;
}
.topnav {
    position: fixed !important;
    top: 73px;
    width: 100%;
    left: 0;
}
.wholeAreaIndex {
    padding-top: 124px;
}
.search-container form {
    display:flex;
}
.topnav .search-container button {
    float: right;
    padding: 6px 10px;
    margin-top: 0px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.header {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
}

我上面更新的内容CSS:-

搜索：-

请设置元素 .topnav .search-container 的位置：绝对定位 relative/fixed 到定位的祖先 .topnav.

菜单栏置顶:- 请设置元素 .header 和 .topnav with position: fixed to sticky menu 并相应地通过 padding-top: 设置 .wholeAreaIndex。

更新的片段：-

  html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
    color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
    color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
    padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
    padding: 20px;
}

div.mainPanel {
        background: white;
    padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

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

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.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;
  }

.topnav .search-container {

   position:absolute; left: 74px; top:0px;
}

.topnav {
  position: fixed !important;
  top: 73px;
  width: 100%; left: 0;
}
.wholeAreaIndex{padding-top: 124px;}
.search-container form{display:flex;}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 0px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.header{position: fixed;
left: 0;
width: 100%;
top: 0;}



}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
<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="stylesheet.css">
<body>

<div class="wholeAreaIndex">

<! –– script for responsive menu ––>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

<! –– header ––>
<div class="header">
Title
</div>

<! –– menu ––>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<! –– content  ––>

<div class="mainPanel" style="background-color:yellow;">
Hello! This is a header.
</div>

<div class="mainPanel">
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
</div>

<! –– footer ––>
<div class="footer">
Footer
</div>


</div>

</body>

Answer 3

如果您使用相同的 CSS 布局（可修复），您将很容易响应网页。
我使用相对位置来改变相同元素的位置。具有 position: relative 的元素；相对于其正常位置定位。
您可以使用此参考资料了解弹性布局。 https://www.w3schools.com/css/css3_flexbox.asp

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <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="stylesheet.css">

    <style>
        html {
            font-family: 'Bree Serif', serif;
        }

        .clearfix:after {
            content: "";
            clear: both;
            display: table;
        }

        a:link {
            color: blue;
        }

        a:visited {
            color: blue;
        }

        a:hover {
            color: orange;
        }

        h2 {
            font-weight: bold;
            font-size: 24px;
            display: inline;
            margin: 0;
        }

        /* Reset padding and margin which gives us full width colour bars when required */
        body {
            padding: 0;
            margin: 0;
        }


        div.header {
            padding: 20px;
            font-size: 24px;
            color: white;
            background: #DD1100;
        }

        div.mainBlog{
            padding: 20px;
            font-size: 18px;
        }

        div.mainPanelMobile{
            padding: 20px;
            font-size: 18px;
        }


        div.mainPanel2{
            padding: 20px;
            background: yellow;
            font-size: 18px;
        }

        div.footer {
            padding: 20px;
            font-size: 16px;
            color: white;
            background: #DD1100;
        }

        /* =============================================================== */

        /* For mobile phones: any relevant code goes below */
        /* if I want to make it invisible I need to add: */
        /* position: absolute; */
        /* left: -9999px; */
        @media (max-width: 720px) {

            div.mainPanel {
                background: white;
                padding: 20px;
            }



        }

        /* =============================================================== */

        /* For tablet computers: */
        @media (min-width: 721px) and (max-width: 1199px) {

            body{
                background: #FFF1E0;
                height: 100%;
                margin: 50px 20px 50px 20px;
            }

            div.wholeAreaIndex{
                padding: 0px 0px 0px 0px;
                max-width:1400px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.wholeAreaPage{
                padding: 0px 0px 0px 0px;
                max-width:1140px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.header {
                padding: 20px;
            }

            div.mainPanel {
                background: white;
                padding: 20px;
            }

            div.mainPanelMobile {
                position: absolute;
                left: -9999px;
            }

            div.footer{
                padding: 20px;
            }

            .sidebar {
                padding-left: 0px;
            }

        }

        /* =============================================================== */

        /* For desktop computers: */
        @media (min-width: 1200px) {

            body{
                background: #FFF1E0;
                height: 100%;
                margin: 50px 20px 50px 20px;
            }

            .left {
                width: 70%;
                float: left;
            }

            .right {
                width: 30%;
                float: left;
            }

            .sidebar {
                padding-left: 20px;
            }

            div.wholeAreaIndex{
                padding: 0px 0px 0px 0px;
                max-width:1400px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.wholeAreaPage{
                padding: 0px 0px 0px 0px;
                max-width:1140px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.header {
                padding: 20px;
            }

            div.mainPanel {
                background: white;
                padding: 20px;
            }

            div.mainPanelMobile {
                position: absolute;
                left: -9999px;
            }


            div.footer{
                padding: 20px;
            }

        }

        /* =============================================================== */


        /* This section is the CSS for the responsive menu: */

        .topnav {
            overflow: hidden;
            background-color: #EEE;
        }

        .topnav a {
            float: left;
            display: block;
            color: #000000;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #4CAF50;
            color: white;
        }

        .topnav .search-container {
            float: right;
        }

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

        .topnav .search-container button {
            float: right;
            padding: 6px 10px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
        }

        .topnav .search-container button:hover {
            background: #ccc;
        }


        /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
        @media screen and (max-width: 425px) {
            .topnav input[type=text] {
                float: none;
                display: block;
                text-align: left;
                width: 76vw;
                margin: 0;
                padding: 14px;
                position: relative;
                top: -1px;
                right: -3px;
            }
            .topnav .search-container {
                float: left;
                height: 53px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
            .topnav .search-container button {
                float: right;
                padding: 15px 15px;
                margin-top: 8px;
                margin-right: 16px;
                background: #ddd;
                font-size: 17px;
                border: none;
                cursor: pointer;
                position: relative;
                top: -59px;
                left: 63px;
            }
        }

        .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;
            }

            .topnav .search-container {
                float: left;
            }
        }

        @media (min-width: 426px) and (max-width: 600px) {
            .topnav input[type=text] {
                float: none;
                display: block;
                text-align: left;
                width: 88%;
                margin: 0;
                padding: 14px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
            .topnav .search-container button {
                float: right;
                padding: 15px 15px;
                margin-top: 8px;
                margin-right: 16px;
                background: #ddd;
                font-size: 17px;
                border: none;
                cursor: pointer;
                position: relative;
                top: -58px;
                left: 63px;
            }
        }
        /* =============================================================== */
    </style>
</head>

<body>

<div class="wholeAreaIndex">

    <! –– header ––>
    <div class="header">
        Title
    </div>

    <! –– menu ––>
    <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
            <form action="/action_page.php">
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>

    <! –– content  ––>

    <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
    </div>

    <div class="mainPanel">
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
    </div>

    <! –– footer ––>
    <div class="footer">
        Footer
    </div>


</div>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>

尝试将搜索合并到响应式菜单中时出现问题

Problems trying to incorporate search into responsive menu

html

css

responsive