how to make a horizontal navigation bar in html
<style>
#nav{
display:flex;
}
</style>
<div id='nav'>
<div><a href='#'>Link A</a></div>
<div><a href='#'>Link B</a></div>
<div><a href='#'>Link C</a></div>
<div><a href='#'>Link D</a></div>
<div><a href='#'>Link E</a></div>
</div>how to make a horizontal navigation bar in html
<!--Using Bootstrap Classes-->
<div id='nav' class='d-flex'>
<div><a href='#'>Link A</a></div>
<div><a href='#'>Link B</a></div>
<div><a href='#'>Link C</a></div>
<div><a href='#'>Link D</a></div>
<div><a href='#'>Link E</a></div>
</div>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 -->vertical line navigation bar
/*navbar properties */
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
.navbar a.navbar-brand {
padding: 9px 15px 8px;
}
.navbar{
font-family: young;
clear: both;
}
.navbar a{
color: #515254;
}
.navbar-nav{
font-size: 20px;
padding-top: 20px;
}
#bs-example-navbar-collapse-1{
float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
color: #007f3d;
background: none;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-toggle {
border: 1px solid #000;
}
.verticalLine {
border-left: thick solid #ff0000;
}
hr.vertical
{
color: black;
width: 0px;
height: 100%; /* or height in PX */
}
/*navbar properties */vertical line navigation bar
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Double Double</title>
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/double.css" rel="stylesheet">
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="margin: auto;display: table;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<hr class="vertical"/>
<li><a href="#">Deals</a></li>
<li><a href="#">Pickup Deals</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
</body>
</html>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
