Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Navigation / Responsive / Sticky

HTML5/CSS Sticky Header With Logo And Navigation

Post a Comment
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top

Solution 1:

Is that what you want?

@charset "utf-8";

body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #808080;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  /* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
  <a href="#galerie">Galerie</a>
  <a href="#blog">Blog</a>
  <a href="#preise">Preise</a>
  <a href="#contact">Contact</a>
  <a href="#aboutUs">Über uns</a>
</div>

<div class="main">
 <div class="top-container">
        <img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
    </div>
 <div class="indexImage">
        <img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
    </div>
 <div class="whiteBarLarge">
    </div>
    <div class="indexImage">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
    </div>
    <div class="whiteBarLarge"></div>
    <footer></footer>
</div>

</body>
</html>

Post a Comment for "HTML5/CSS Sticky Header With Logo And Navigation"