CODEWITHSUNDEEP
node.jstwitter-bootstrapexpressbootstrap-4routes
Zuhaib
Zuhaib

Reputation: 49

linking on bootstrap dropdown not working

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        More <i class="fas fa-angle-down ml-3"></i></a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

here is the code for dropdown

.dropdown-toggle::after {
    display: none;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

this is the css for displaying dropdown on hover

clicking on the link doesnt navigate to the page... i am using express as the backend n typing the link in the navbar works but not clicking the link..

i tried adding data-target but also doesnt seems to work.. i treid setting pointer-event to auto but tat also doesnt deems to work..

image showing the link

Upvotes: 0

Views: 1264

Answers (2)

SuperStar518
SuperStar518

Reputation: 2885

This link might be a help.

Bootstrap Dropdown Hover

Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.

Keypoint is to add data-hover="dropdown"

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
   Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown">
      <a href="#">One more dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown">
          <a href="#">One more dropdown</a>
          <ul class="dropdown-menu">
          ...
          </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
       </ul>
    </li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Upvotes: 1

Sai Manoj
Sai Manoj

Reputation: 3859

Try using data-hover="dropdown" aria-haspopup="true" aria-expanded="false"

<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link  dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

Upvotes: 1

Related Questions