Css 响应导航栏正在向下推送内容

当导航栏在Chrome上处于正常非响应模式（我不确定这是否是正确的术语）并且您向下滚动时，当您向下滚动时，徽标图像仍保留在菜单后面。但是，当屏幕宽度缩小，菜单折叠，您单击图标展开菜单时，它会向下推徽标图像。我希望在手机上查看时，该徽标图像保留在菜单后面

我想我以后会有一些内容，我确实想被按下，但这个标志我不想按下。我可以让它成为我正在使用的背景的一部分，但我认为如果我能让它保持一个单独的图像来显示，它会渲染得更好

CSS

HTML

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

将音调设置为绝对位置。这是您的媒体查询的

最大宽度：600px

.topnav.responsive {position: absolute;}

希望这有帮助：）

#徽标{
宽度：50%；
利润率：80px自动；
}
托普纳夫先生{
背景图片：url(http://www.buffettworld.com/images/navmenubg.png);
背景大小：100%；
字体系列：'Pathway Gothic One'，无衬线；
边缘顶部：10px；
位置：固定；
排名：0；
宽度：100%；
}
.topnav a{
浮动：左；
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 25px；
文字装饰：无；
字号：21px；
}
.topnav.icon{
显示：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字号：21px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 25px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#b1d235；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：绝对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：相对；}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}
.粘的{
位置：固定；
顶部：10px；
宽度：100%
}

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

谢谢你，杰拉尔多。这就解决了！不客气，如果你有更多的代表，请向上投票。谢谢

<div class="topnav" id="myTopnav">
  <a href="#home">HOME</a>
  <a href="#news">NEWS</a>
  <a href="#news">TOUR</a>
    <div class="dropdown">
    <button class="dropbtn">JIMMY 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        <a href="#">BIOGRAPHY</a>
        <a href="#">AVIATION</a>
        <a href="#">INCIDENTS</a>
        <a href="#">BUSINESS EMPIRE</a>
        <a href="#">CONTACT JIMMY</a>
    </div>
        </div>
          <div class="dropdown">
    <button class="dropbtn">MUSIC 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        <a href="#">ALBUMS</a>
        <a href="#">SONGS</a>
        <a href="#">CHART HISTORY</a>
        <a href="#">TRIBUTE BANDS</a>
  </div>
        </div>
        <a href="#about">SET LISTS</a>
        <a href="#about">ABOUT</a>
        <a href="#about">ADVERTISE</a>
        <a href="#about">CONTACT</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>


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



    <div id="logo">

        <img src="http://www.buffettworld.com/images/logo.png">
    </div>

.topnav.responsive {position: absolute;}