<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0;
background-color:#9024d4;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li{
border-bottom:2px solid #000;
border-right:2px solid #000;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active){
background-color: orange;
}
ul.topnav li a.active {
background-color: #9024d4;
}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
</style>
</head>
<body>
<! -- completed by CodeWithBrain -->
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<! -- completed by CodeWithBrain --><! -- completed by CodeWithBrain -->
<div style="padding:0 16px;">
<h2>Responsive Topnav Bar Example</h2>
<p>This example of topnav vertically when the screen size is 600px or less.</p>
</div>
<! -- completed by CodeWithBrain -->
</body>
</html>
MOBILE VIEW
- Responsive navbar template
- top navigation bar
- navigation bar in html
0 Comments
If you have any problem in code write in comments!