CSS
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position:sticky;/*eğer sorun olursa fixed olarak değiştirin*/
top:0px;
width: 100%;
}
.navigation_bar li {
float: left;
border-right:1px solid #bbb;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li:last-child {
border-right: none;
}
.navigation_bar li a:hover:not(.active) {
background-color: #111;
}
.navigation_bar .active {
background-color: #708090; /*#4CAF50*/
}
Html
<body>
<div class="navigation_bar">
<ul>
<li><a class="active" href="#anasayfa">Anasayfa</a></li>
<li><a href="#haberler">Haberler</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#DCDCDC;height:1500px;">
<h1>Sabit Navigasyon Barı</h1>
<h2>Sayfayı aşağıya kaydırınız.</h2>
<h2>Sayfa aşağı doğru kaydığında navigasyon barının sabit kaldığını göreceksiniz..</h2>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
</div>
</div>
</body>
Çıktı

Tags:

css navigation bar kullanımı
navigation bar css active
navigation bar nedir
navigation bar html
html navigation bar template
menu bar css
css navigation menu
menu bar html css
bar menu css
top bar menu css
navigation bar css and html
horizontal navigation bar kullanımı
navigation bar css active
navigation bar css animation
navigation bar css template
css navbar yapımı
css navigation bar align right
css navigation bar active link