How to make the navigation bar fixed on top on scroll

Question

This is my fiddle i seen some topics on this website to make it happen, but i am making some mistakes in applying it. Can someone help me.

I wanna make the navigation bar fixed on top on scroll.

 body { width: 100%; height: 100%; margin:0px; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f2f2f2; } .navbar li { float: left; } li a, .dropbtn { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #333; color: #f2f2f2; } .navbar li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #333} .navbar .show {display:block;} .xavierslogo { width: 110px; height: 109px; margin-left: 20%; } .xavierstext { width: ; height: ; margin-left: 0%; } .topbg { background-color: #333; }

 <header class="topbg"> <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> </header> <ul class="navbar"> <li><a href="#home">Home</a></li> <li><a href="#news">Text one</a></li> <li><a href="#news">Text Two</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <div class="main"> z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br> </div>

Answer 1

add the following code to this class

.navbar {
    list-style-type: none;
     overflow: hidden;
   position:fixed;
}

 body { width: 100%; height: 100%; margin:0px; } .navbar { list-style-type: none; overflow: hidden; position:fixed; } .navbar li { float: left; } li a, .dropbtn { display: inline- block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #333; color: #f2f2f2; } .navbar li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #333} .navbar .show {display:block;} .xavierslogo { width: 110px; height: 109px; margin-left: 20%; } .xavierstext { width: 100; height: 100; margin-left: 0%; } .topbg { background-color: #333; }

 <header class="topbg"> <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> </header> <div> <ul class="navbar"> <li><a href="#home">Home</a></li> <li><a href="#news">Text one</a></li> <li><a href="#news">Text Two</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> <div class="main"> z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br> </div>