dropdown menus not working

Contributor ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

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

Views

114

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines