How To Install Bootstrap Navbar Component To Blogger Theme

As mentioned before, we do not use pre-installed Blogger navbar and header widgets on our blogger theme. We install Bootstrap 4 navigation bar and header directly into our template. The other important issue is about Bootstrap navbar CSS class name which need to be changed to a new CSS class name. This issue occurred due to a CSS class name conflict with the pre-setting blogger widget styling. You may refer to our previous post for the method to change Bootstrap 4 navbar class name.

Below is the HTML markup to position the Bootstrap 4 navigation bar and header of the template. Setting of the components is important as we want to place them at the most top of the page. Hence, other components, which are visible on any page, should not be installed above these component HTML markups

<body expr:class='"loading" + data:blog.mobileClass'>
    <b:if cond='data:blog.pageType == "index"'>...</b:if>
    <header class='m-0 p-0'>
      <nav class='navbar navbar-toggleable-md navbar-dark'>
        <!-- Bootsrap Navbar Component should be placed here -->
      </nav>
    </header>
    <b:if cond='!data:view.isPost and !data:view.isPage'> 
       <!-- Jumbotron or Carousel Component for Header Image should be placed here -->
    </b:if>
     ...
</body>

Method Explanation

The Bootstrap Navbar and Header Image Components should be placed at the top position of <body> tag before the <div class='row'> tag of the <b:section class='main' id='main' name='Main' showaddelement='no'>.
The Bootstrap Navbar component should be placed inside the <header> tag, and the header image component should be placed outside the <header> tag in order to make the navbar component is positioned on top of the header image component, and not separately as two different components.

There are many Bootstrap 4 Navbar and Header Image Components available on the internet. These components can be a good example that can give a new idea for us to create our own blogger theme. A good online reference for the Bootstrap 4 is MDBootstrap, which provides a free, comprehensive tutorial with easy to understand and to implement the method. Visit mdbootstrap.com for Bootstrap 4 Navbar designs and related components.

We attach below 2 examples of Basic Bootstrap 4 Navbar and Header Image components, which have been tested on our blogger theme. These components are responsive based on all screen views and easy to install on any blogger theme.

Bootstrap 4 Navbar Component Example

Navbar Examples On 3 Different Screen Views

<nav class="navbar navbar-expand-md navbar-dark default-color m-0">
   <a class="navbar-brand" href="#"><img alt='logo' class='d-inline-block mr-3' height='30' src='ADD YOUR IMAGE URL HERE' width='30'/>Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
   <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
         </li>
         <li class='nav-item'>
            <a class='nav-link' href='#'>Item 1</a>
         </li>
         <li class='nav-item'>
            <a class='nav-link' href='#'>Item 2</a>
         </li>
         <li class='nav-item dropdown mb-1'>
            <a class='nav-link dropdown-toggle' id='navbarDropdownMenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'<Dropdown</a>
               <div class='dropdown-menu dropdown-default w-100 mt-3 m-0' aria-labelledby='navbarDropdownMenu'>
                  <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 ml-auto nav-flex-icons d-flex flex-row m-0'>
            <li class='nav-item mr-3'>
               <a class='nav-link waves-effect waves-light'><i class='fab fa-twitter'></i></a>
            </li>
            <li class='nav-item mr-3'>
               <a class='nav-link waves-effect waves-light'><i class='fab fa-google-plus-g'></i></a>
            </li>
            <li class='nav-item mr-3'>
               <a class='nav-link waves-effect waves-light'><i class='fab fa-facebook-f'></i></a>
            </li>            
         </ul>
      <div>
         <form class='form-inline'>
            <div class='md-form my-0'>
               <input class='form-control mr-sm-2' type='text' placeholder='Search' aria-label='Search'/>
            </div>
         </form>
      </div>
   </div>
</nav>

Tips to modify button display.

<div class='navbar-header'>
<button aria-controls='navbarContent' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-target='#navbarContent' data-toggle='collapse' type='button'>
<span class='navbar-toggler-icon'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'>></span>
</button>
<a class='navbar-brand text-uppercase' href='#'><img alt='logo' class='d-inline-block mr-3' height='30' src='Add Logo URL Here' width='30'/>Navbar</a>
</div>

Button Position - Change button position to the left side by replacing the navbar-brand and button in the code above with the html markup below:
Button Size - To change a button size to a smaller button, simply replace <span class='navbar-toggler-icon'></span> with a font awesome icon <i class='fas fa-bars'></i>.

Search This Blog

Blogger Codes