Html 使导航栏具有响应性_Html_Css

Html 使导航栏具有响应性

html css

Html 使导航栏具有响应性,html,css,Html,Css,我面临一个使导航栏响应的问题-如果我在topnav类中更改导航栏的默认高度并调整屏幕大小，其他菜单选项将在小屏幕视图中消失。我需要帮助来解决这个问题- 下面是我的代码：函数myFunction（）{ var x=document.getElementById（“myTopnav”）；如果（x.className==“topnav”）{ x、类名+=“响应”； }否则{ x、 className=“topnav”； } } 正文{ 保证金：0；字体系列：Arial、Helvetica、

我面临一个使导航栏响应的问题-如果我在topnav类中更改导航栏的默认高度并调整屏幕大小，其他菜单选项将在小屏幕视图中消失。我需要帮助来解决这个问题-

下面是我的代码：

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

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

中间文本的问题在于导航栏的高度，您将导航栏设置为2.5rem，但添加文本大小和填充使标记的高度更高

进行这两项更改，将

.topnav

替换为以下代码

.topnav {
overflow: hidden;
background-color:#001a33;
height: auto;
}

第二，修改代码

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: inline-block;}
.topnav a.icon {
float: right;
display: block;
}
}

在

@媒体屏幕和（最大宽度：600px）

更改

显示

到

内联块

我已经给出了答案，但如果您不知道如何更改，这里是您的完整代码和新更改。您可以使用此代码。：）


身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#001a33；
高度：自动；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:inline block；}
.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”；
}
}

我不认为您正在使用引导。检查这个引导谢谢你回答这么多细节！我很感激！：）

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color:#001a33;
  height: auto;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  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 .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: inline-block;}
  .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;
  }
}
</style>
</head>
<body>

<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>



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