dropdown menus not working

[beng2000]

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

[beng2000]

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>

[beng2000]

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

[osgood_]

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.

[Nancy OShea]

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/