Adding dropdown list to side navbar (bootstrap)

LH1980 · Jun 3, 2023

Hi,

I am trying to add a drop down toggle within a side navbar. I can either get all the links displayed (rather than in a dropdown to open and close) or just the toggle button but no event opening or closing the sub menu. I have tried many iterations of markup, and I am hoping it is something simple!


The header:


     <div id="content">
         <!-- header -->
         <header>
            <!-- header inner -->
            <div class="header">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
                        <div class="full">
                           <div class="center-desk">
                              <div class="logo">
                                 <a href="https://www.site.com/index.php"><img src="https://www.seecuring.com/images/300.png" alt="#" /></a>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
                        <ul class="btn">
                          <!-- <li class="down_btn"><a href="#">Download</a></li>-->
                           <!--<li><a href="#">Sign Up</a></li>-->
                           <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                           
                               <span class="visually-hidden">Toggle Dropdown</span>



                           
                           <li><button type="button" id="sidebarCollapse">
                              <img src="https://www.site.com/images/menu_icon.png" alt="#" />
                              </button>
                           </li>
                        </ul>
                     </div>
 
                                     
                      
                  </div>
               </div>
            </div>
         </header>

The side menu I want to add a drop down to:

<div class="sidebar">        
<!-- Sidebar  -->
         <nav id="sidebar">
            <div id="dismiss">
               <i class="fa fa-arrow-left"></i>
            </div>
            <ul class="list-unstyled components">
               <li class="active"> <a href="https://www.seecuring.com">Home</a> </li>
               <li><a href="https://www.seecuring.com/about/">About </a> </li>


THIS IS THE CODE BELOW, ALL THIS DOES IS LIST OUT THE LINKS WITHOUT A DROPDOWN:

       
            <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
             
               <li><a href="#contact">Contact </a> </li>
            </ul>  
             
             
         </nav>
      </div>

Does anyone have a solution for something like this?

Thanks!

Adding dropdown list to side navbar (bootstrap)

LH1980

New member

Similar threads