creating navigation bar in html and css

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 "creating navigation bar in html and css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "creating navigation bar in html and css"

Code answers related to "creating navigation bar in html and css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us