Related Articles

Related Articles

How to align two navbars in bootstrap ?
  • Last Updated : 20 Nov, 2020

Navbar is a section of web application that allows users to navigate to different sections of the website. As the name suggests, navbar is basically a navigation bar. Bootstrap 4 comes up with an inbuilt navbar class that allows us to create navbars. Also, we can create custom navbars by defining the various CSS styles as per our requirement. In this article, we will demonstrate both the methods of aligning two navbars using CSS inbuilt classes as well as custom CSS styles.

Example 1: In the first approach, we have made use of the inbuilt navbar class of Bootstrap 4. Two navbars are placed one after the other. The first navbar has a dark background and the navigation links are left-aligned whereas the “Register” and “Logout” buttons are right-aligned. The first navbar also consists of a dropdown menu that has links to several sections of the website. The second navbar has the navigation links aligned to the right and plaintext with a hyperlink aligned to the left. Both the navbars are responsive to the screen size. The navbar toggle button appears when the screen size reduces and disappears when the screen size increases. The toggle button when clicked displays the navbar.

Code implementation:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  
    <!--import bootstrap cdn-->
    <link rel="stylesheet" href=
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
  
    <!--import jquery cdn-->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
  
    <!--First navbar-->
    <nav class="navbar navbar-expand-lg 
                navbar-dark bg-dark">
  
        <a class="navbar-brand" href="#">Navbar</a>
  
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" 
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
              
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse" 
                id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                        href="#" id="navbarDropdown"
                        role="button"
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="false">
                        Dropdown
                    </a>
  
                    <div class="dropdown-menu" 
                        aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">
                            Action
                        </a>
                          
                        <a class="dropdown-item" href="#">
                            Another action
                        </a>
                          
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            Something else here
                        </a>
                    </div>
                </li>
            </ul>
  
            <button class="btn btn-success my-2 
                my-sm-0 mx-2" type="submit">
                Register
            </button>
              
            <button class="btn btn-danger my-2 
                my-sm-0" type="submit">
                Logout
            </button>
        </div>
    </nav>
  
    <!--Second navbar-->
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light">
          
        <button class="navbar-toggler" 
            type="button" data-toggle="collapse" 
            data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
              
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse" 
            id="navbarNavAltMarkup">
            We have changed our Privacy 
            Policy. To know more
            <a href="#" class="mx-1">click here</a>.
              
            <ul class="navbar-nav ml-auto">
                <li class="nav-item nav-link" 
                    href="#">About Us
                </li>
                  
                <li class="nav-item nav-link" 
                    href="#">Contact Us
                </li>
                  
                <li class="nav-item nav-link" 
                    href="#">Explore
                </li>
            </ul>
        </div>
    </nav>
</body>
  
</html>

chevron_right


Output:



Example 2: In this approach, navbars are created using custom CSS styles. The topnav class division represents the first navbar and the bottomnav class division represents the second navbar. The first navbar has the navigation links aligned to the left and the login link to the right. The second navbar has the navigation links to the left and the “register” and “logout” buttons to the right. Unlike the previous example, the navbars in this example are not responsive. The navbars do not adapt to the screen size.

Code Implementation:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  
    <!--import bootstrap cdn-->
    <link rel="stylesheet" href=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!--import jquery cdn-->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous">
    </script>
  
    <style type="text/css">
        .topnav {
            background-color: #DCEEFF;
            overflow: hidden;
            height: 40px;
            padding: 8px;
        }
  
        .bottomnav {
            background-color: #E5E5E5;
            overflow: hidden;
            height: 40px;
            padding: 8px;
        }
  
        a {
            color: black;
            padding-right: 20px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="topnav">
        <a class="active" href="#">Home</a>
        <a href="#">Feature</a>
        <a href="#">Deals</a>
        <a href="#">Blog</a>
        <a href="#" class="float-right">Login</a>
    </div>
    <div class="bottomnav">
        <a class="active" href="#">More</a>
        <a href="#">Contact</a>
        <a href="#">About Us</a>
        <a href="#">Link</a>
        <a class="btn btn-info btn-sm 
            float-right mx-2">Logout</a>
        <a class="btn btn-success btn-sm 
            float-right">Register</a>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :