nav 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

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

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <form class="example" action="action_page.php"> <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form>

<a class="active" href="#home">Home</a> <a href="news.html">News</a> <a href="contact.html">Contact</a><a href="about.html">About</a>  .topnav a { float: left; color: goldenrod; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; } /* Change the color of links on hover */ .topnav a:hover { background-color: rgb(221, 221, 221); color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: red; color: goldenrod; }

Code answers related to "nav bar in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "nav bar in html"

Code answers related to "nav bar in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us