top nav examples css

Example 1: 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 -->

Example 2: css responsive navigation

#header{
position:fixed;
z-index:1000;
left:0;
top:0;
width:100vw;
height:auto;
}

#header .header{
min-height:8vh;
background-color: rgba(0,0,0,0.3);
}

#header .nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
  max-width:1300px;
  padding:0 10px;
}

#header .nav-list ul{
  list-style:none;
  position:absolute;
  background-color:rgb(31,30,30);
  width:100vw;
  height:100vh;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1;
  overflow-x:hidden;
}

#header .nav-list ul a{
  font-size:2.5rem;
  font-weight:500;
  letter-spacing: .2rem;
  text-decoration:none;
  color:white;
  text-transform:uppercase;
  padding:20px;
  display:block;
  
  
}

Tags:

Css Example

Recent Posts