CODEWITHSUNDEEP
htmlcssnavigationresponsivesticky
Konstantin
Konstantin

Reputation: 41

HTML5/CSS Sticky Header with logo and navigation

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 when it reaches the top of the browser.

I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..

@charset "utf-8";

*{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.top-container{
	position: absolute;
	width: 100%;
}


.stopleft{
	padding-top: 34%;
	width: 50%;
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	float: left;
}

.stopright{
	padding-top: 44.2%;
	width: 50%;
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	float: right;
}


.whiteBarSmall{
	width: 100%;
	padding-top: 5%;
	background-color: #fff;
	position: absolute;
}

.logo{
		position: sticky;
		top: 0;
		width: 50%;
		float: left;
	 }

.navigation{
	margin: 0px 0px 0px 0px;
	border: solid 0px #000;
	position: sticky;
	top: 0;
	width: 50%;
	float: right;
}

	.navigation ul{
		height: 100px;
	}
	 .button{
		list-style: none;
		margin: 25px 20px 25px 20px;
		float: right;
	 }

.navBackground{
	border: solid 0px #000;
	position: sticky;
	top: 0;
	width: 100%;
	padding-top: 5%;
	background-color: #a7a7a7;
	float: right;
	z-index: -1;
}


.whiteBarLarge{
	width: 100%;
	padding-top: 10%;
	background-color: #fff;
}


.indexImage{
	width: 100%;
}



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

.sticky + .content {
  padding-top: 102px;
}



footer{
	width: 100%;
	padding-top:  2.5%;
	background-color: #a7a7a7;
}

.navigation a:link {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}


.navigation a:visited {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}
.navigation a:focus {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}

.navigation a:hover {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}

.navigation a:active {
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Volkhov', sans-serif;
    font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>Test</title>
	<meta name="description" content="…." />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="icon" href="pics/favicon.ico" />
	<link rel="stylesheet" href="styles/basics.css" type="text/css" />
	<link rel="stylesheet" href="styles/index.css" type="text/css" />
	<link rel="stylesheet" href="styles/links.css" type="text/css" />
    
    <link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet"> 
</head>
<body>
    <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="stopleft"></div>
    <div class="stopright"></div>
        <div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
        <div class="navigation">
             <ul>
                <li class="button"><a href="pages/uber_uns.html">Über uns</a></li>
                <li class="button"><a href="pages/kontakt.html">Kontakt</a></li>
                <li class="button"><a href="pages/preise.html">Preise</a></li>
                <li class="button"><a href="pages/blog.html">Blog</a></li>
                <li class="button"><a href="pages/galerie.html">Galerie</a></li>
             </ul>
        </div>
        <div class="navBackground"></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>
</body>
</html>

I am having a lot of trouble with this bar... Hope someone can help me. Thanks!

Upvotes: 1

Views: 3877

Answers (1)

Husam Ebish
Husam Ebish

Reputation: 6828

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>

Upvotes: 1

Related Questions