How do I make the entire navbar item clickable for the Bootstrap dropdown?

Question

I have a button in a navbar that I want completely clickable for the dropdown to open. I can't seem to achieve that. If I add margin instead of padding , it messes it up even more. What am I doing wrong here?

I basically want the entire button clickable, not just the text part.

My markup is like this:

<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>

And to make it easier a fiddle: https://jsfiddle.net/wx3udazj/1/

Any hints or help are greatly appreciated! :)

Answer 1

You seem to be using div s, buttons and p tags where you should be using ul s and li s. Also, your dropdown-menu shouldn't be inside of the element that triggers it in this context.

That, and a few css tweaks and you'll be sorted:

 .header_wrapper { min-height: 70px; z-index: 1030; background-color: #FFF; position: relative; top: 0; width: 100%; z-index: 100; border-bottom: 1px solid #c4c4c4; } .header_right>ul { margin-bottom: 0px; } .header_right { width: 33.33%; text-align: right; } #btn_menu { display: inline-block; border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; } .right_side_toggle { background: none; border: none; outline: none; padding: 0; position: relative; top: 0px; padding: 20px 20px; line-height: 30px; } .right_side_toggle div { padding: 20px 0px; } .right_side_toggle_label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-weight: 500; color: inherit; padding-right: 0px; position: relative; text-align: left; top: 0px; font-size: 14px; margin: 0px 30px 0px 30px; 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="header_wrapper"> <div class="header_right"> <ul> <li class="dropdown" id="btn_menu"> <div class="right_side_toggle dropdown-toggle js-flyout-toggle" aria-labelledby="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span id="js-account-title">Menu</span> </div> <ul class="dropdown-menu "> <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> </li> </ul> </div> </div>