Being a novice in HTML coding, I decided to utilize an established API for my project. After some previous experience, I opted to use Twitter Bootstrap 3.1.
Here is how my current nav-stacked section appears with a customized CSS to make it collapsible:
https://i.sstatic.net/QnRZ0.jpg
Below is the code snippet for this section, omitting repetitive portions for brevity:
<div class="col-xs-3 sidebar" id="ASEsideNav">
<!This is left Vertical Nav bar>
<div class="navbar navbar-inverse" id="ASEsideNav">
<div class="collapse navbar-collapse" id="ASEsideNav">
<ul class="nav nav-stacked" id="menu-bar"> <!-- Notice the "nav-stacked" class we added here -->
<!-- We add the panel class to workaround collapsing menu items in Bootstrap -->
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapse1"> Safety</a>
<ul id="collapse1" class="panel-collapse collapse">
<li><a href="#">Guardwell Perimeter Safety Products</a></li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapse2"> Kettles</a>
<ul id="collapse2" class="panel-collapse collapse">
<li><a href="#">Patch Kettles</a></li>
<li><a href="#">Asphalt Kettles</a></li>
<li><a href="#">Kettle Accessories</a></li>
<li><a href="#">Heat Transfer Kettles</a></li>
<li><a href="#">Emission Control System</a></li>
</ul>
</li>
</div>
</div> <!End of navbar>
</div>
I've modified this code based on another webpage with distinct CSS styles. However, there are noticeable spaces between each button that I can't seem to adjust. Here's the source page for reference:
The spacing issue seems elusive as I'm still learning and catching up with web development standards. How can I reduce the distance between the buttons in my nav-stacked menu?
Your feedback is appreciated!