"Normal Navigation Bar"
Bootstrap 4.1.1 Snippet by kaushar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Nav menu</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> </head> <body> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a href="#blog">blog</a></li> </ul> </body> </html>
ul{ padding:0px; margin:0px; list-style-type:none; overflow:hidden; background-color:#333; } li{ float:left; } li a{ display:block; color:#fff; padding: 14px 16px; text-decoration:none; font-size:19px; } li a:hover{ background-color: #f2f2f2; color:#000; } .active{ color:#fff; background-color:green; }

Related: See More

Datepicker
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments: