html navigation bar
<!-- How to create a navigation bar: This is the html file: Put the class="active" in the html file/page you are coding in (e.g. put the class="active" in the Home.html file) To position a page link to the right do class="right" --> <body> <ul class="topnav"> <li><a class="active" href="Home.html">Home</a></li> <li><a href="Page1.html">Page1</a></li> <li><a href="Page2.html">Page2</a></li> <li class="right" ><a href="About.html">About</a></li> </ul> </body> <!-- This is the css file: (have a play with the colours and features!)--> ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-family: arial; text-align: left; width: 100%; position: sticky; top: 0; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; float: left; font-size: 17px; border-right: 1px solid #bbb; } ul.topnav li a:hover:not(.active) { background-color: #ddd; color: black; } ul.topnav li a.active { background-color: #4CAF50; } ul.topnav li.right { float: right; } @media screen and (max-width: 720px) { ul.topnav li{ width: 100%; } ul.topnav a{ width: 100%; } } <!-- END -->