HTML响应导航始终显示第一个和最后一个项目

我有以下代码的响应导航栏。现在所有的菜单时间都隐藏在小屏幕上，除了主页按钮

我需要保持搜索菜单也为小屏幕。如何在下面的代码中实现这一点

身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：n个子（1））{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

试试这个

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

正文{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
.topnav a:n子级（2）{display:none；}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a{display:none；}
.topnav a:第一个子项.topnav a:第n个子项（2）{display:block；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.a:n子级（6）{display:none；}
}

当我使用菜单栏打开时，仍然有一些问题出现在侧菜单上的搜索菜单。当@600以下响应时，您是否需要显示搜索栏与主菜单固定？是的，搜索栏和主菜单按钮都需要保留，其余的应出现在侧菜单上@code现在有更好的方法来完成您尝试的操作。您不需要使用

float

，只需使用flexbox和一些javascript即可实现所需的布局。谢谢，我会参考的。