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%;
}

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

.navbara:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  /* height: 1500px; *//* Used in this example to enable scrolling */
}
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style></style></head><body><divclass="navbar"><imgsrc="https://png.icons8.com/ios/1600/external-link-squared-filled.png"alt="Logo"class-="logo"height=50width=50style="float: left"><ahref="#galerie">Galerie</a><ahref="#blog">Blog</a><ahref="#preise">Preise</a><ahref="#contact">Contact</a><ahref="#aboutUs">Über uns</a></div><divclass="main"><divclass="top-container"><imgsrc="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><divclass="indexImage"><imgsrc="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg"alt=""width="100%" /></div><divclass="whiteBarLarge"></div><divclass="indexImage"><imgsrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD"alt=""width="100%" /></div><divclass="whiteBarLarge"></div><footer></footer></div></body></html>

Post a Comment for "Html5/css Sticky Header With Logo And Navigation"