navbar w3schools

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"> <title>Navbar</title> <style> body { margin: 0; } .navbar{ padding: 15px; background-color: grey; display: flex; justify-content: space-between; font-size: 30px; text-decoration: none; color: #fff; } .nav-item { margin: 0; padding: 0; flex: 1; max-width: 50%; display: flex; justify-content: space-evenly; font-size: 25px; } .nav-link { display: inline-block; } a{ text-decoration: none; color: #fff; } @media (max-width: 715px) { .nav-item { flex-direction: column; align-items: center; } .nav-link { margin: 5px 0; } } </style> </head> <body> <nav class="navbar"> <a class="brand" href="">Navebar</a> <ul class="nav-item"> <li class="nav-link"><a href="">Learn more</a></li> <li class="nav-link"><a href="">About</a></li> <li class="nav-link"><a href="">Contact</a></li> </ul> <a class="home" href="">Home</a> </nav> </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>

<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 "navbar w3schools"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "navbar w3schools"

Code answers related to "navbar w3schools"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us