响应式下拉菜单在这里工作得很好:
https://klia2.co/include/header.htm
但当按如下方式插入内容页时，在媒体屏幕中查看时下拉菜单不下拉。
https://klia2.co/index2.htm
比较了两个链接来理解实际场景。
请注意，内容页中徽标标题和菜单的对齐方式也不一致。
请协助纠正这个问题，并欢迎所有的建议和感激。
HTML PAGE - index2.htm
<body>
<div id="header"></div>
<div class="content">
<br>
<br>
** content **
<br>
<br>
<div id="footer"></div>
</div>
</body>
HTML PAGE - header.htm
<body>
<div class="content">
<header id="logo"></header>
<div class="navbar" id="nav">
<a href="https://klia2.co" class="active">Home</a>
<a href="../facilities/index.htm">Facilities</a>
<a href="../airlines/index.htm">Airlines Offices</a>
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}
</script>
</body>
CSS CODE - style1.css
/* CSS Reset */
body {font-family:Arial;
}
.content {
max-width: 1040px;
margin: auto;
}
/*--------------------------logo---------------------------------*/
#logo {
background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
width: 1040px;
height: 150px;
border: 0;
margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
#logo {
width: 100%;
}
}
/*--------------------------menu---------------------------------*/
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height:18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
@media screen and (max-width: 600px) {
.navbar a, .navbar .search-box, .navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position:relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon{
display: flex;
}
}
/*--------------------------body------------------------*/
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column-reverse;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}*/
页脚是问题所在。删除css，它会破坏导航栏样式。此外，元标签应该在标题中。截图https://prnt.sc/1t7vjgu