Skip to main content
Known Participant
November 18, 2020
Question

dropdown menus not working

  • November 18, 2020
  • 2 replies
  • 1047 views

Hello.  I had my navbar in and it was working fine.  When I added a  different logo that was a little bigger all of my dropdowns stopped dropping down.  

 

Would anyone know why?

Thanks

 

BG

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    November 18, 2020

    Did you upload both the parent page (containing the Bootstrap CSS and scripts) along with the nav.shtml to your remote server to test?

     

    What is the URL of your test page?

     

    Also validate to ensure there are no critical errors in the combined code.

    https://validator.w3.org/

     

    Nancy O'Shea— Product User & Community Expert
    beng2000Author
    Known Participant
    November 18, 2020

    This is the bootstrap code with my image, the Home button and my dropdowns. Is there something wrong with it.  I deleted bootstrap.css and then downloaded a new copy but that did not work. 

     

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <a href="index.shtml" title="The Center for Family Development" class="navbar-brand navbar-brand-font">
    <img src="images/logonavbar.png" width="496" height="146" alt="Logo"/></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 navbar-font" id="navbarSupportedContent1">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
    <a class="nav-link" href="index.shtml">Home <span class="sr-only">(current)</span></a> </li>

    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="staff.shtml">Staff</a>
    <a class="dropdown-item" href="offices.shtml">Offices</a>
    <a class="dropdown-item" href="testimonials.shtml">Testimonials</a> </div>
    </li>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Treament</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="treatmentoptions.shtml">Treatment Options</a>
    <a class="dropdown-item" href="dyadicdevelopmentalpsychotherapy.shtml">DDP</a>
    <a class="dropdown-item" href="treatmentresearch.shtml">Research</a>
    <a class="dropdown-item" href="treatmentchildren.shtml">Children</a>
    <a class="dropdown-item" href="treatmentadults.shtml">Adults</a>
    <a class="dropdown-item" href="treatmentforms.shtml">Forms</a>
    <a class="dropdown-item" href="treatmentarticals.shtml">Articles</a>
    </div>
    </li>

    <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"> Training </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="trainingoptions.shtml">Training Options</a>
    <a class="dropdown-item" href=""masterclasses.shtml>Master Classes</a>
    <a class="dropdown-item" href="certifications.shtml">Certifications</a></div>
    </li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Research</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="#">DDP</a>
    </div>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Therapists</a> <a class="dropdown-item" href="#">Parents</a> <a class="dropdown-item" href="#">Articles</a> <a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a> </div>
    </li>
    <li class="nav-item"> <a class="nav-link" href="booksanddvds.shtml">Books and DVDs<span class="sr-only"></span></a></li>
    </ul>
    <div class="social">
    <a href="https://www.facebook.com/Center-For-Family-Development-181177051901298/"alt="Facebook Icon"><img src="images/facebooksmall.png" class="img-fluid" alt="Facebook Account"></a></div>
    </div>
    </nav>

    beng2000Author
    Known Participant
    November 18, 2020

    Also this is just the navbar code in a .shtml file.  It will be included in all of the pages of the site.

    Legend
    November 18, 2020

    The dropdowns won't work unless you have the Bootstrap javascript files included, which should be in the actual page that you are inserting the .shtml include file navigation into. Could that be the problem?

     

    I've tested your code and the dropdowns works just fine, assuming you have the javascript files linked. If you have then it must be something else which is causing the issue.