While the navbar is in normal non-responsive mode (I'm not sure if that's the right terminology) on Chrome and you scroll down, the logo image stays behind the menu. However, when the screen width shrinks and the menu collapses, clicking the icon to expand it pushes the logo image down. I want the logo image to remain behind the menu when viewed on mobile.
Later on, I might have some content that I do want to be pushed down, but for now, I don't want this logo to be affected. It could be made part of the background, but I think it would look better as a separate image.
CSS
#logo {
width: 50%;
margin: 80px auto;
}
.topnav {
background-image: url(http://www.buffettworld.com/images/navmenubg.png);
background-size: 100%;
font-family: 'Pathway Gothic One', sans-serif;
margin-top: 10px;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
font-size: 21px;
}
... // CSS styles continued
<p>HTML</p>
<pre><code><div class="topnav" id="myTopnav">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#news">TOUR</a>
... // HTML structure continued
</div>
<div class="dropdown">
<button class="dropbtn">MUSIC
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
... // HTML content continued
</div>
... // More HTML content
</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>