I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here?
Essentially, my goal is to have the entire button be clickable, not just the text part.
This is how my markup looks:
<div class="header_wrapper">
<div class="header_right">
<div class="dropdown" id="btn_menu">
<button class="right_side_toggle dropdown-toggle js-flyout-toggle">
<p class="hidden-xs right_side_toggle_label
dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span id="js-account-title">Menu</span></p>
<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</button>
</div>
</div>
</div>
If you prefer, here's a fiddle link to see the code in action: https://jsfiddle.net/wx3udazj/1/
Any hints or assistance would be highly appreciated! :)