What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

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! :)

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It appears that you are utilizing divs, buttons, and p tags instead of using uls and lis where appropriate. Additionally, your dropdown-menu should not be contained within the element triggering it in this specific context.

With a few adjustments to your css, everything should fall into place:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to secure a successful arrangement using a quiz system

My goal is to create a quiz system, but the output currently looks like this: Question1 Answer1 Question1 Answer2 It should actually look like this: Question1 Answer1 Answer2 ... and so on Any suggestions on how I can correct this issue? Here's t ...

phphtmlmysqlphpmyadminwhile-loop

Enhancing Contact Form 7 with features like a 'select all checkbox' and a 'show more/show less button'

I need to include four checkboxes on every contact form 7 throughout the website. The first checkbox should act as a master selector for the other 3 checkboxes. The second checkbox relates to our privacy policy. Checkbox number three is for marketi ...

jquerywordpresscontact-form-7

How can a parameter be added to a query string only when there is a value present in a textbox using JavaScript?

Hello everyone, I am looking to add parameters to a URL only if the search text box value is different from the default. I have three search text boxes and I want to include them in the URL. Below is my code snippet: $("#search-btn").click(function (e) { ...

javascriptjqueryajaxservlets

Working with Firestore database in React Js may result in an infinite loop

I have connected my React JS app to Cloud Firestore and I am facing an issue with displaying the objects in my JavaScript file. Even though I only have one object in Firestore, it seems to be reading in a loop and I can't seem to identify the cause. ...

javascriptreactjsfirebasegoogle-cloud-firestore

Is there an easy method for extracting URL parameters in AngularJS?

Hello, I'm new to Angular and coming from a background in PHP and ASP. In those languages, we typically read parameters like this: <html> <head> <script type="text/javascript"> var foo = <?php echo $_GET['foo&apo ...

javascriptangularjs

How about a CSS one-by-one black pixel that's not opaque?

I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...

htmlcss

The submit function for Ajax is not functioning properly

<script> var markerLatitude; var markerLongitude; function initializeMap() { var centerCoordinates = new google.maps.LatLng(51.8979988098144, -2.0838599205017); var mapOptions = { zo ...

javascriptphphtmlajax

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

Steps for creating a table with a filter similar to the one shown in the image below

I am unsure how to create two sub-blocks within the Business A Chaud column and Potential Business Column. Thank you! I managed to create a table with input, but I'm struggling to replicate the PUSH & CtoC Column format in both Business A Chaud and ...

javascripthtmlangulartypescriptangular-material

Display method JSONized

Looking for guidance on improving code efficiency and best practices. In my current project, I am working with a JSON Array structured like this: [ { "Date": "2014-07-16", "DiscPoint": "Description 1", "DisBy": "Person 1" ...

htmlajaxjson

Click Action on CanJS Table

I am currently developing a canJS application and have been able to successfully handle the click event for an HTML table using the code below. 'table td click':function(el,event){ console.log('clicked ',el.text()); } ...

javascriptcanjscanjs-control

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

javascriptjqueryhtmlcss

Retrieve the property called "post" using Restangular

With the following code, I am fetching a list of 'postrows': $scope.postrows = {}; Restangular.all('/postrows').getList().then(function(data){ $scope.postrows = data; }); The returned JSON structure is as follows: { id: 1, post ...

javascriptjsonangularjspostrestangular

How to troubleshoot Bootstrap 5 tabs not hiding flex content after tab change?

Bootstrap 5 tab features a Leaflet map that we intend to occupy all remaining space once selected. We managed to achieve this, but now, when switching tabs, the content area of the first tab does not disappear. We suspect that the issue might be related t ...

csstwitter-bootstrapflexboxleafletbootstrap-5

How can we leverage Shared and Core modules alongside Feature modules in Angular development?

When developing my Angular application, I have adopted a specific architecture approach and included a shared.module.ts file in the shared folder. While leveraging lazy-loading in my app, I find myself puzzled about the necessary imports, declarations, and ...

javascriptangulartypescriptangular-routingangular-module

The debate between classes and data attributes in terms of auto field initialization

A Brief Background In the realm of javascript/jQuery, I've crafted a method that traverses through various fields and configures them based on their type - be it dropdowns, autocomplete, or text fields... The motivation behind this is my personalize ...

javascriptjqueryhtmlcustom-data-attributesinemacula

Refreshing a page in MVC after making an Ajax call to the controller

In my controller, I have the following code: public async Task < ViewResult > Favourites(string ids) { // API call to fetch book data if (data != null) { var bookList = JsonConvert.DeserializeObject < Book[] > (data); ...

javascriptajaxasp.net-mvcrazor

A guide to sketching the ellipsoid with three.js

Despite Three.js offering functions for drawing ellipses, I am in need of assistance to draw an ellipsoid instead. Can someone please help me? I have a specific requirement to draw an ellipsoid using three.js. ...

javascriptthree.js

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

javascripthtmlcss

Is it possible to create a table using a loop in an SQLite query?

Welcome In the company where I work, Excel is currently being used to manage a large database of items for cost estimation purposes. To simplify this process, I am developing an Electron App that will replace Excel with a more user-friendly interface and ...

javascriptjqueryhtmlsqliteelectron