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

我正在尝试制作一个响应性强的菜单——我对桌面版很满意，但我把手机版搞砸了

在小于600px的屏幕上，如何使搜索栏显示在汉堡中（最好是在顶部，文本框旁边有搜索图标），而不是在该行下方

（我还试图让菜单栏粘粘的，并在600px以下用一个logo替换家，但一次只能做一件事…）

感激地、感激地、感激地接受任何帮助。非常感谢

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

html{
字体系列：“Bree Serif”，Serif；
}
.clearfix:之后{
内容：“；
明确：两者皆有；
显示：表格；
}
a:链接{
颜色：蓝色；
}
a:参观了{
颜色：蓝色；
}
a:悬停{
颜色：橙色；
}
氢{
字体大小：粗体；
字体大小：24px；
显示：内联；
保证金：0；
}
/*重置填充和边距，在需要时为我们提供全宽彩色条*/
身体{
填充：0；
保证金：0；
}
分区标题{
填充：20px；
字体大小：24px；
颜色：白色；
背景：#DD1100；
}
div.mainBlog{
填充：20px；
字号：18px；
}
主面板移动分区{
填充：20px；
字号：18px；
}
分区主面板2{
填充：20px；
背景：黄色；
字号：18px；
}
分区页脚{
填充：20px；
字体大小：16px；
颜色：白色；
背景：#DD1100；
}
/* =============================================================== */
/*对于手机：任何相关代码如下所示*/
/*如果我想让它隐形，我需要添加：*/
/*位置：绝对位置*/
/*左：-9999px*/
@介质（最大宽度：720px）{
分区主面板{
背景：白色；
填充：20px；
}
}
/* =============================================================== */
/*对于平板电脑：*/
@介质（最小宽度：721px）和（最大宽度：1199px）{
身体{
背景#FFF1E0；
身高：100%；
保证金：50px 20px 50px 20px；
}
div.wholeAreaIndex{
填充：0px 0px 0px 0px；
最大宽度：1400px；
背景：白色；
保证金：自动；
盒影：20px 20px 16px#111111；
}
全日制公寓{
填充：0px 0px 0px 0px；
最大宽度：1140px；
背景：白色；
保证金：自动；
盒影：20px 20px 16px#111111；
}
分区标题{
填充：20px；
}
分区主面板{
背景：白色；
填充：20px；
}
主面板移动分区{
位置：绝对位置；
左：-9999px；
}
分区页脚{
填充：20px；
}
.侧边栏{
左侧填充：0px；
}
}
/* =============================================================== */
/*对于台式计算机：*/
@介质（最小宽度：1200px）{
身体{
背景#FFF1E0；
身高：100%；
保证金：50px 20px 50px 20px；
}
.左{
宽度：70%；
浮动：左；
}
.对{
宽度：30%；
浮动：左；
}
.侧边栏{
左侧填充：20px；
}
div.wholeAreaIndex{
填充：0px 0px 0px 0px；
最大宽度：1400px；
背景：白色；
保证金：自动；
盒影：20px 20px 16px#111111；
}
全日制公寓{
填充：0px 0px 0px 0px；
最大宽度：1140px；
背景：白色；
保证金：自动；
盒影：20px 20px 16px#111111；
}
分区标题{
填充：20px；
}
分区主面板{
背景：白色；
填充：20px；
}
主面板移动分区{
位置：绝对位置；
左：-9999px；
}
分区页脚{
填充：20px；
}
}
/* =============================================================== */
/*本节是响应菜单的CSS：*/
托普纳夫先生{
溢出：隐藏；
背景色：#EEE；
}
.topnav a{
浮动：左；
显示：块；
颜色：#000000；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
/*当屏幕宽度小于600px时，垂直堆叠链接和搜索字段，而不是水平堆叠*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav输入[类型=文本]{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.search容器{
浮动：左；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
}
/*===========================================================================================*/

标题
你好这是一个标题。
你好这是本页的主要内容。你好这是本页的主要内容。你好这是本页的主要内容。你好这个我
  .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.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }

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