making a navigation bar in html

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 -->

Posted by: Guest on October-17-2020

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Navigation</title> <style> .navbar{ background-color: black; border-radius: 30px; } .navbar ul{ overflow: auto; } .navbar li{ float:left; list-style: none; margin: 13px 20px; } .navbar li a{ padding: 3px 3px; text-decoration: none; color: white; } .navbar li a:hover{ color: red } .search{ float: right; color: white; padding: 12px 75px; } .navbar input{ border: 2px solid black; border-radius: 14px; padding: 3px 17px; width: 129px; } </style> </head> <body> <header> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> <div class="search"> <input type="text" name="search" id="search" placeholder="Search this website"> </div> </ul> </nav> </header> </body> </html>

<nav> Thing1 | Thing2 | Thing3 </nav>  <ul class="topnav"> <li><a class="active" href="#">Thing 1</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li class="right" ><a href="#">Thing 2</a></li> </ul> <style> 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%; } } </style>

Code answers related to "making a navigation bar in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "making a navigation bar in html"

Code answers related to "making a navigation bar in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us