What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Adding dropdown list to side navbar (bootstrap)


New member

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?