Bootstrap Double Row Navbar - Using HTML, CSS & JavaScript

Bootstrap Double Row Navbar

Hello Friends In this article we will teach you to design a Bootstrap Double Row Navbar with the help of Using HTML, CSS & JavaScript.


With the help of a Double Row Navbar, you can show your content or information directly to your users. So let's start designing the Double Row Navbar. 


Double Row Navbar


We'll take you step-by-step to learn how to create a Double Row Navbar in this one article.


How to Design a Double Row Navbar?


First of all, you need HTML Structure For Double Row Navbar



Bootstrap Double Row Navbar


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html b:css="false" b:defaultwidgetversion="2" b:layoutsVersion="3" b:responsive="true" b:templateVersion="1.3.0" expr:class="data:blog.languageDirection" expr:dir="data:blog.languageDirection" expr:lang="data:blog.localeUnderscoreDelimited" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<head>{codeBox}



Now It's Time to Add Some CDN Links?


The long-form of CDN is "Content Delivery Network". CDN is a network of servers spread around the world that saves the files of your website in its temporary memory i.e. cache. CDN sends these files to all its servers and when a user visits your website, CDN delivers those files from your website from its cache to the server closest to that user. 


In such a situation, these files do not have to travel much and due to the short distance, those files reach that user very fast. This process increases the speed of your website to a great extent.


ADD THIS LINK BELOW THE <head> AND ABOVE </head> TAG



<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>{alertSuccess}


NOW IT'S TIME TO ADD OUR HTML STRUCTURE FOR BOOTSTRAP DOUBLE ROW NAVBAR


</head>


<body translate="no">

<a class="navbar-brand ml-3" href="#"> <span class="">AKASH TIMES </span> </a>

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">

<!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->

<div class="navbar-toggler-right">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

</div>

<div class="collapse navbar-collapse flex-column " id="navbar">

<ul class="navbar-nav  w-100 justify-content-center px-3">

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

</ul>

<ul class="navbar-nav justify-content-center w-100 bg-secondary px-3">

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


          Dropdown link


        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>

</li>

</ul>

</div>

</nav>{codeBox}



As you can see in the above code that we have prepared the HTML structure first, after that using the <nav> tag inside the body, <ul> and <li> have been used. 


<ul> means un-ordered list in which we add links. To add links, we have used <li> element and inside it <a> i.e. to give Anchor Tag Link.


Now We Will Design Our Bootstrap Double Row Navbar With CSS


<style>


.navbar {

  padding: 0rem;


  margin-bottom: 2rem;

}


.dropdown .dropdown-menu {

  border-radius: 0;

}


/* Medium devices (tablets, 768px and up)


  The navbar toggle appears at this breakpoint */


@media (min-width: 768px) {

  .dropdown:hover .dropdown-menu {

    display: block;


    margin-top: 0;


    border-radius: 0;

  }

}


</style>{codeBox}


 NOTE: DO NOT FORGET TO CHANGE THE COLOUR CODES OF YOUR CHOICE AND LINKS NAME.{alertError}


NOW IT'S TIME TO ADD SOME JAVASCRIPT CDN LINKS TO THE DOUBLE ROW NAVBAR


<script src='https://code.jquery.com/jquery-3.2.1.slim.min.js'></script>{alertSuccess}


<script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=7"></script>{alertSuccess}


CONCLUSION


In this article, we have given you information about Bootstrap Double Row Navbar - Using HTML, CSS & JavaScript, we hope that you will find the information given by us useful. If you like the information, then definitely share it with your friends. 


If you want to ask questions, then you can tell us through the comment.


THANK YOU HAVE A NICE DAY.


AKASH TIMES

I AM AN ENGINEER BY PROFESSION BUT BLOGGER IS MY OLD DAYS DREAM TO CREATE MY OWN SITE FOR THOSE WHO ARE CURIOUS ABOUT MY BIRTHPLACE THEN I AM COMING FROM (INDIA). THE CURRENT CITY LIVES IN NAVI MUMBAI, INDIA

Post a Comment

IF YOU HAVE ANY PROBLEM PLEASE FELL FREE TO CONTACT US BY - AKASH TIMES

Previous Post Next Post