Javascript 在导航栏中放置文本横幅

我开始编写网站代码，在那里我开始用CSS编写HTML。但是，我想我犯了一个错误，我没有在开始编程之前输入

以下是导航栏的代码：

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

li{
浮动：左；
右边框：0px实心#bbb；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：19px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#112；
}
.主动{
背景色：#990000；
}
身体{
保证金：0；
}
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
背景色：#333；
-webkit过渡：所有0.4s易用性；
-moz过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
}
ul.topnav li{
浮动：左；
}
ul.topnav li a{
显示：内联块；
颜色：#FFF；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
字体系列：“Dosis”，无衬线；
}
ul.topnav李a：悬停{
背景色：#990000；
}
ul.topnav li激活{
背景色：#990000；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li：不是（第一个孩子）{
显示：无；
}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{
位置：固定；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}
否则{
x、 className=“topnav”；
}
}
}
.视频包装器{
最大宽度：640px；
左边距：自动；
右边距：自动；
}
.视频包装器{
浮动：无；
明确：两者皆有；
宽度：100%；
位置：相对位置；
垫底：50%；
填充顶部：25px；
身高：0；
}
.videowrapper内部iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.集装箱{
宽度：100%；
最大宽度：40.7em；
保证金：0自动；
}

将下面的

li

以及

右侧的
和
mob
类添加到列表中

  <li class="right mob"><a href="#">Heading</a>
  </li>

li{
浮动：左；
右边框：0px实心#bbb；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：19px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#112；
}
.主动{
背景色：#990000；
}
身体{
保证金：0；
}
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
背景色：#333；
-webkit过渡：所有0.4s易用性；
-moz过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
}
ul.topnav li{
浮动：左；
}
ul.topnav li.对{
浮动：对；
}
ul.topnav li a{
显示：内联块；
颜色：#FFF；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
字体系列：“Dosis”，无衬线；
}
ul.topnav李a：悬停{
背景色：#990000；
}
ul.topnav li激活{
背景色：#990000；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:不是（.mob）{
显示：无；
}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
ul.topnav li.对{
浮动：无；
文本对齐：居中；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{
位置：固定；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
ul.topnav.li.对{
位置：绝对位置；
排名：0；
左：50%；
转换：转换（-50%，0）；
}
}
.视频包装器{
最大宽度：640px；
左边距：自动；
右边距：自动；
}
.视频包装器{
浮动：无；
明确：两者皆有；
宽度：100%；
位置：相对位置；
垫底：50%；
填充顶部：25px；
身高：0；
}
.videowrapper内部iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.集装箱{
宽度：100%；
最大宽度：40.7em；
保证金：0自动；
}












您好，下面的答案有助于您解决问题吗？它可以工作，但现在我想在顶部放置一个文本徽标，当您向下滚动时，您只能看到导航。当您向上滚动时，会出现文本标题。另外，如果可以的话，如何编写一个崩溃的底部，在那里你可以放网站的概述，社交媒体的链接等等？：）我认为你应该先尝试一下，如果你被困在某个地方，就发布一个新的问题，这是最好的！