in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links. the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining. here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li><a href="#">בית</a></li>
<li><a href="#about_us">מי אנחנו</a></li>
<li><a href="#our_services">מוצרים</a></li>
<li><a href="#connect_us">צרו קשר</a></li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}
in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links. the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining. here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li><a href="#">בית</a></li>
<li><a href="#about_us">מי אנחנו</a></li>
<li><a href="#our_services">מוצרים</a></li>
<li><a href="#connect_us">צרו קשר</a></li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}
- The issue is because navigation has fixed position. If you add top margin in all content container it will solve you issue. – Manish Shukla Commented Apr 19, 2015 at 10:17
- but then the content begin 55px downer. that's not what i want... – APRULE Commented Apr 19, 2015 at 10:29
- You might want to use jquery and set the .scroll() options – user1752532 Commented Apr 19, 2015 at 10:30
- APRULE, please see my modified answer which better suits your needs. @gerdi, good suggestion! – AmmarCSE Commented Apr 19, 2015 at 10:42
- it's still not working to me. – APRULE Commented Apr 19, 2015 at 11:20
3 Answers
Reset to default 6Try adding padding top to container
.container
{
padding-top: 55px;
}
fiddle
If you do not wish to have the text move down by 'x' pixels, you can programmatically scroll with an adjusted offset using jQuery:
$('html, body').animate({
scrollTop: $(target).offset().top - 55
}, 1000);
Notice, this example does not use padding-top:
fiddle
Or, without jQuery:
window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);
fiddle
If anyone is still looking at this in 2024 there is a more modern solution using "scroll-padding-top". This can just be applied to the html element:
html { scroll-padding-top: 100px; }
References: https://developer.mozilla/en-US/docs/Web/CSS/scroll-padding-top
https://getpublii./blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
The easiest way by far would be to add some padding (as much as the navbar is high) to the divs that serve as targets for your links:
div.container{ padding-top: 55px; }
For the sake of semantics, I'd remend you also use section elements instead of those meaningless divs, etc… https://html.spec.whatwg/multipage/semantics.html#sections
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742303919a4418558.html
评论列表（0条）