How to Customize the Menu Bar for Navigation in Blogger.com using HTML and Bootstrap | Actual Codes Given

Hi,

If you came here after watching my YouTube video on the same topic as in the title, then you will know what the following codes are and where to put them.

I am sharing here three different codes to be put in different sections of the Blogger.com theme. Please watch the video for the details.

YouTube video for Blogger.com Menu Customization, Dropdown Menu

Code to be put in <head></head> Tags – Bootstrap and CSS stylesheet Links:


<!-- My Edits Starts-->

<!-- Bootstrap CSS -->
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css' integrity='sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We' rel='stylesheet'/>

<link href='css/bootstrap.min.css' media='screen' rel='stylesheet'/>

<!-- My Edits End-->

2. Put the Following Code just before the </body> tag in the Blogger.com theme.

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script crossorigin='anonymous' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' src='https://code.jquery.com/jquery-3.2.1.slim.min.js'/>
<script crossorigin='anonymous' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'/>
<script crossorigin='anonymous' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'/>

<script crossorigin='anonymous' integrity='sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj' src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js'/>

   <!-- My Edits -->

3. The following code is to be put after the </header> tag.

Please edit the Name/text and Links ( ‘href’ ) according to your needs.

 <!-- My Edit -->
       <!-- Dropdown -->
      
      
    <nav class='navbar navbar-expand bg-dark navbar-dark' style='height:50px;'>
       <div class='navbar-brand nav-item dropdown'>
      <a class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' id='navbardrop'>
        <span style='color:blue; background-color:yellow; height:30px; padding:5px;'>Solution Manuals of Books</span>
      </a>
      <div class='dropdown-menu'>
        <a class='dropdown-item' href='https://civilengineering-softstudies.com/free-book-solutions-strength-of-materials-by-dr-r-k-bansal.html' style='color:white; background-color:#84760A;'>Strength of Materials by R K Bansal</a>
        <a class='dropdown-item' href='https://civilengineering-softstudies.com/book-solutions-of-mechanics-of-materials-by-r-c-hibbeler.html' style='color:white; background-color:red;'>Mechanics of Materials by R C Hibbeler</a>
       
         </div> </div>
      
      <div class='navbar-brand nav-item dropdown'>
      <a class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' id='navbardrop'>
        <span style='color:blue; background-color:yellow; height:30px; padding:5px;'>Laboratory Tests</span>
      </a>
      <div class='dropdown-menu'>
        <a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/09/vicats-apparatus-consistency-and.html#' style='color:white; background-color:green;'>Vicat&#39;s Aparatus - Consistency Test of Cement</a>
        <a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/11/compaction-factor-test-for-concrete.html' style='color:white; background-color:red;'>Compaction Factor Test for Concrete</a>
        <a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/11/concrete-slump-test.html' style='color:white; background-color:green;'>Concrete Slump Test</a>
          
      </div>
    </div>
      </nav>