CODEWITHSUNDEEP
htmlcssweblayout
Burak Ertürk
Burak Ertürk

Reputation: 11

How to fix my layout so my nav bar doesn´t hide some content after linking to the desired section

my navbar is set to fixed, but everytime i press on e.g. home, it doesnt scroll to the most top, the site is just a little under the maximum you can possibly scroll to the top, this makes my H1 beeing covered partly by my navbar.

I want my Nav bar to Navigate to the most top part of the site, which means that there is no more space to scroll to the top. right now when i click on "home" on the nav bar, half of my H1 is covered by the navbar because it´s not scrolled up enough

Upvotes: 0

Views: 420

Answers (2)

adel
adel

Reputation: 3507

html, body{margin: 0; padding: 0; height: 100%; text-align: center;}
section { min-height: 85%}
a {text-decoration: none;}
li {list-style-type: none;}

h1, h2, h3,a { font-family: "Roboto Slab", sans-serif ; font-weight: 500; color: #494949;text-transform: uppercase;}
h1, h2 {color: white;
text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;}
h3 {font-size: 40px; padding-top: 0%;margin-bottom: 5px;}
h4, p {font-family: "Roboto Slab", serif; color:#494949;}

/* h1 padding as solution for the "jump to home" problem :h1 {padding-top: 2.5%} *******/


hr {width: 100px;height: 3px;background: #494949;border: 0;margin: 0 auto 40px auto;}
#logo,li,img,.button {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms}


/* HEADER ********************************/
header { width: 100%; height: 65px; position: fixed; top:0;	left: 0; background: #FEFCFB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) ; z-index: 1; }

	#logo {

	width: 140px;
	float: left;
	margin: 10px 0 0 -10px
	}

#logo img{

	width: 56%;


}

#logo:hover {
	opacity: 0.5;
}

	
header nav {

	float:right;
	margin:6px 50px 0 0;
}

header nav ul li {
	float:left;
	margin-left: 25px;
}

header nav ul li a {
	font-size: 16px
}

header nav ul li:hover {
	padding-top: 5px;
}
/* Header

#headerino {
	min-height: 10%
}
 ********************************/





/* Home ********************************/


#home{
	background: url(../img/landing.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment:  fixed;
	}

#home h1 {
	margin: 0;
  padding-top:60px;
	font-size: 110px}

#home h2 {
	margin: 0 auto 0 auto;
	font-size: 25px;

}

#home img  {
	width: 32px;
	margin-top: 150px;
	opacity: 0.7;
}
#home img:hover {
	opacity: 1;
}
#home {min-height: 100%}
/* About ********************************/


#about img {
	width: 240px;
}

#about h4{
	font-size: 15px;
}

#about p{
	width: 70%;
	margin:0 auto 0 auto;


}

#about img:hover {
	transform: scale(1.1);
}


/* Kurzwarenmobil ********************************/

#DasKurzwarenmobil img {
	width: 400px;
	border-radius: 3px;


}
#DasKurzwarenmobil {
	background-color: #D3D3D3;
	opacity: 1;
}
#DasKurzwarenmobil p{
	width: 70%;
	margin:0 auto 0 auto;
	}

#DasKurzwarenmobil img:hover {
	transform: scale(1.1);
}



/* Ich bringe den Großhandel zu ihnen ********************************/
#Großhandel img {
	width: 400px;
	border-radius: 3px;}

	#Großhandel img:hover {
	transform: scale(1.1);
}

#Großhandel p{
	width: 70%;
	margin:0 auto 0 auto;
}
/* Service ********************************/
#service img {
	width: 400px;
	border-radius: 3px;
}

#service {
	background-color: #D3D3D3;
	opacity: 1;
}
#service img:hover {
	transform: scale(1.1);}

#service p{
	width: 70%;
	margin:0 auto 0 auto;
	}

/* Contact  ********************************/


form input, textarea {
font-family: "Roboto Slab", serif;
font-size: 15px;
margin-bottom: 10px;
border-radius: 10px;
border: 2px solid;
border-color: #494949;
outline: none;
}

form input {

	width: 552px;
	height: 30px

}

form textarea {
	width: 552px;
	height: 200px;
	resize: none;
	border-color: #494949;
}


.input_text {
	color:#494949 ;
	padding-left: 10px;
}

.button {

	width: 566px;
	height: 50px;
	background-color: #f0f0f0;
	color: #494949;
}

.button:hover {

	background-color: #494949;
	color: #f0f0f0;

}

/* Footer  ********************************/


footer {

width: 100%;
height: 70px;
background-color: #3f3f3f;
}

footer p {
	font-size: 12px;
	color: #f0f0f0;
	padding-top:30px;
}

/* Media Queries ********************************/






/* Tablets ********************************/

@media screen and (max-width:1024px){



#logo {
	width: 100px;
	margin-top: 5px;
}


header nav {
	margin-top: 10px;

}
header nav ul li {
	font-size: 12px;
}

#home h1 {
	font-size: 65px;
	

}

#home h2 {
	font-size: 22px;
}
h3 {padding-top: 12%
}

}
/* Mobile********************************/

@media screen and (max-width:480px) {

}
 <!DOCTYPE html>
 <html>
  <head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">

 	<title>H.S. Schneiderbedarf &#124 Kurzwarenmobil</title>
 	<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet"> 
 	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> 

  </head>



  
	<!-- Header -->
  	<header>
 
  		<div id="logo">
 			<img src="img/111.jpg"="Kurzwarenmobil">
  		</div>

  		<nav>
  		
  			<ul>
  				<a href="#home"><li>home</li></a>
  				<a href="#about"><li>Über mich</li></a>
  				<a href="#DasKurzwarenmobil"><li>Das Kurzwarenmobil</li></a>
  				<a href="#Kontakt"><li>Kontakt</li></a>
  			</ul>
  		</nav>
  	</header>


  	<!-- Home -->
<section id="home">
  			<h1>Kurzwarenmobil</h1>
  			<h2>H.S. Schneiderbedarf</h2>
  			<a href="#about">
  			<img src="img/pfeil.png" alt="arrow">
  			</a>
</section>


  	 <!-- Über mich -->

<section id="about">
 			<h3>Über mich</h3>
 			<hr>
 			<img src="img/avatar.png" alt="Hüllis face">
 			<h4>H.S Schneiderbedarf<h4>
 			<p> 
 				Ich Bin Hülya S. und habe mittlerweile mehr als ein Jahrzent Erfahrung im Schneider- sowie Kurzwarengeschäft angesammelt. 
				Meine Leidenschaft und Faszinierung der Branche gegenüber brachten mich
				nach jahrelangem arbeiten als Näherin in verschiedenen Unternehmen dazu, mich in dieser Branche selbstständig zu machen
				
				Nachdem die Entscheidung der Selbstständigkeit gefällt war, fing die Arbeit erst richtig an. Nach langem Konzeptionieren, Umsetzen, Verfeinern, Scheitern und wieder aufstehen war letzendlich die Idee des "Kurzwarenmobils" geboren.
				<br>

				Mittlerweile erstreckt sich mein Kundenstamm weit über die Grenzen Hannovers, den Heimatort des Kurzwarenmobils aus. Mittlerweile beläuft sich das Geschäft auf viele große sowie kleine Städte Norddeutschlands, und die Kapazitätsgrenze ist noch lange nicht erreicht.
			
			</p>
</section>


 		<!-- Kurzwarenmobil -->

<section id="DasKurzwarenmobil">
 			<br>
 			<h3>Das Kurzwarenmobil</h3>
 			<hr>
 			<img src="img/333.jpg" alt="INSERT IMG Hülli WAGEN+ Sie">
 			<h4>Was Ist das Kurzwarenmobil?</h4>
 			<p>
 				Das Kurzwarenmobil ist mein Transporter, mit dem ich täglich verschiedene Städte  Deutschlands besuche und meinen über 300 Kunden, die
				benötigten Utensilien und Stoffe direkt zu ihren Läden liefere.

			
 			</p>
 			<br>
 			<br>
</section>
			
			<br>


		<!-- großhandel--->
<section id="Großhandel">

	<h4>Ich bringe den Großhandel zu ihnen</h4>

	<img src="img/4444.jpg" alt="Großhandel">
	<br>
	<br>

	<p>

	Da das Hauptgeschäft des Kurzwarenmobils auf die Mobilität und große Auswahl ausgelegt ist  und ich die Waren direkt vom Großhandel beziehe,
	bin ich in der Lage die beste Ware zum günstigen Preis anzubieten. wodurch sie selbstverständlich bares Geld sparen können!
	<br>
	Umfangreiches Angebot und stets die aktuellsten Waren der Kurzwarenwelt, Ob Knöpfe und 
	Reißverschlüsse für individuelle Modeschöpfungen, Handarbeitsgarne oder modische
	Bänder und Kordeln für kreative Deko-Ideen: Das Kurzwarenmobil führt stehts eine Große Auswahl an hochwertigen
	Arbeitsmaterialien und das ohne Einschränkung und in voller Ausführung direkt vor ihrer Tür! 
	Durch regelmäßige Besuche und kostenloser Anfahrt können sie dadurch Einsparungen in ihren Lagerhaltungs- bzw Lieferungskosten einsparen.

	</p>

</section>


		<!-- individueller service-->

<section id="service">
	<br>


	<h4>Individueller Service</h4>

	<img src="img/222.jpg" alt="Sortiment innen">
	<br>
	<br>


	<p>

	Durch die Natur meiner Arbeit haben sie nicht nur den Vorteil, dass ich ihnen alle benötigten Utensilien bis vor die Türe bringe, sondern auch das Privileg sich am gesamten Katalog des Kurzwarenmobils vor Ort inspirieren und individuell beraten zu lassen. Fehlerhafte Bestellung gehören damit der vergangenheit an!
	
	

	</p>
	<br>
 			
</section>

		 	<!-- Contact -->

<section id="Kontakt">
			<h3>Kontakt</h3>
			<hr>

			<form>
			<input class="input_text" type="email" tabindex="1" Placeholder="E-mail" ><br><br>
			<input class="input_text" type="text" tabindex="2" Placeholder="Betreff" ><br><br>
		    <textarea class="input_text" tabindex="3" Placeholder="Nachricht" ></textarea> <br><br>
		    	<input class="button" type="submit">

			</form>
</section>

		 	<!-- Footer -->

		<footer>
			<p>
				&copy; 2018-2019 B.Ertürk, All rights reserved
			</p>
		</footer>

		<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous">
			
		</script>
		<script 
		src="js/mobile-menu.js" type="text/javascript">				
	 	</script>

   </body>
 </html>
this is it! solved by removing margin on your home h1 and adding padding! you should alway use remove padding and margin on all elements because by default they got some margin and padding values!

Upvotes: 0

Senpai.D
Senpai.D

Reputation: 438

Welcome to Stackoverflow Burak 👋 Please try linking to <a href="#logo">, so that it scrolls to the logo - I think it should solve your issue, but if not, plese care to include a link to http://jsfiddle.net where you can share your code and visualize the issue

Upvotes: 0

Related Questions