Skip to main content
S
sharonk39116496
Inspiring
January 4, 2020
Question

Using Dreamweaver 2019 and bootstrap 4 - trying to get multiple Navbar Dropdowns to work

  • January 4, 2020
  • 2 replies
  • 941 views

How can I get three dropdown items in a bootstrap 4 navbar.  The below example is for one dropdown in the navbar.  It has a id="navbardropdown" so I   cannot copy this code therefore for the second or third dropdown , since I cannot repeat the id="navbardropdown" three times in the code.  

This is bootstrap 4 dropdown code .  Of course I am new to this and working on it all day,  so appreciate your help.  

 

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Studio Classes</a>
<a class="dropdown-item" href="#">Private Class or Consultation </a>
</div>
</li>

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 4, 2020

Number them with a suffix of 1, 2, 3...

 

<!--1st dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

<!--2nd dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

<!--3rd dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
January 4, 2020

That's not hugely creative thinking (tongue in cheek). Are we ever going to get the emoijs???????

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 4, 2020

    "That's not hugely creative thinking..."

    You're right.  Chalk it up to too much holiday food and drink. 😞

     

    I use keyboard emojis.

    :  - ) = smile

    :  - ( = frown

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    January 4, 2020

     

    Actually Bootstrap drop-downs are not dependent on unique ids. You can just give the id any name you like the sound of (see example below). But yes it's true, although the dropdowns WILL still work if you use the same id, it's best practice to use unique ids. Just in case you need to add a javascript event to that id in future or some specific css. Javascript/css then knows which event/styling to apply to which specific id.

     

    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="mickey_mouse" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Link 5
    </a>
    <div class="dropdown-menu" aria-labelledby="mickey_mouse">
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Another action 2</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here 2</a>
    </div>
    </li>

     

    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="donald_duck" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Link 6
    </a>
    <div class="dropdown-menu" aria-labelledby="donald_duck">
    <a class="dropdown-item" href="#">Action 3</a>
    <a class="dropdown-item" href="#">Another action 3</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here 3</a>
    </div>
    </li>

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices