CODEWITHSUNDEEP
cssnavbar
Josh Martin
Josh Martin

Reputation: 65

Responsive Navbar is pushing down content

When 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 remains behind the menu when you scroll down. However when the screen width is shrunk and the menu is collapsed and you click the icon to expand the menu, it pushes the logo image down. I want that logo image to remain behind the menu when viewing on mobile.

I think I'll have some content later that I do want to be pushed down, but this logo I don't want pushed down. I could make it part of the background I'm using, but I think it'll render better if I can keep it a separate image to be displayed.

https://jsfiddle.net/martonian/Ljd5v3ty/

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;

}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;

}

.dropdown .dropbtn {
    font-size: 21px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 25px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #b1d235;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .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;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.sticky {
  position: fixed;
  top: 10px;
  width: 100%
}

HTML

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

Upvotes: 2

Views: 1184

Answers (1)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Make your tonav position absolute. This on your media query of max-width: 600px

.topnav.responsive {position: absolute;}

Hope this helps :)

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

}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;

}

.dropdown .dropbtn {
    font-size: 21px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 25px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #b1d235;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

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

@media screen and (max-width: 600px) {
  .topnav.responsive {position: absolute;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.sticky {
  position: fixed;
  top: 10px;
  width: 100%
}
<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>

Upvotes: 1

Related Questions