0

Stack Overflow questions/answers similar this one did not work for me.

Browser window reduces width until drop down tabs are replaced with hamburger symbol, which opens on a click to expose menus. The problem is the hamburger symbol needs a second click to collapse, instead of collapsing on clicking one of the exposed menus.

This problem has been reported before. None of the suggested scripts worked. The suggested solution (5) using data-target=".navbar-collapse" in each dropdown nav link succeeded in collapsing the hamburger symbol as intended, but stopped the menus working.

  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-secondary">

  <a class="navbar-brand" href="#"></a>

   <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent1" aria- 
   controls="navbarSupportedContent1" aria-expanded="false" aria- 
   label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent1">

    <ul class="navbar-nav mr-auto">

<li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown 1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contents</a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown 1">

<a class="dropdown-item" href="#Contents">Contents</a>
    </div>
</li>
brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
John Edwards
  • 11
  • 2
  • Works as expected https://www.codeply.com/go/zFTXMSj0c2 according to the accepted answer in the dup. – Carol Skelly Aug 28 '19 at 21:01
  • The addition of data-toggle="collapse" data-target=".navbar-collapse.show" to each menu item, as in Rescue stops the menu from working, but succeeds in collapsing the hamburger. So this solution is not working. All the other lines of my HTML are identical to the example you gave that is supposed to work. Could there be something else wrong in my code that calls up Bootstrap? FYI my Bootstrap carousels work. – John Edwards Aug 29 '19 at 09:00
  • Post all of the relevant code – Carol Skelly Aug 29 '19 at 11:23
  • https://www.codeply.com/go/zFTXMSj0c2 is navbar code that is expected to work, but does not when pasted into my HTML file. The problem remains, the hamburger collapses as intended, but the drop-downs stop working. Is there something else that could be wrong, for example the bootstrap I am using? – John Edwards Aug 29 '19 at 14:49
  • Zim, how can I send you my entire HTML file? The web page using the problem code is live, https://www.hajarhiking.com/ – John Edwards Aug 29 '19 at 18:54

0 Answers0