Bootstrap Drop-Down Stopped Working

Can anyone take a look at this page and tell me if they see anything would cause a perfectly fine website to stop working - the drop down menu (bootstrap) was working but no longer does.    Clicking on a propos should drop a menu.   I don't think we changed anything that should have caused this.

https://www.horatioalger.ca/fr/index.cfm
digitalwiseAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sammySeltzerCommented:
Are you sure that not even browser has been upgraded?

It seems to me that the problem has always been there except some sort of a browser change revealed it.

For instance, when you click a menu, the menu is highlighted indicating the current menu user is viewing.

Notice that clicking on the a propos menu and then clicking on another menu creates two hovers.

The hover on a propos menu doesn't go off.

I will css or jquery depending on what you used to create the hovers.

I think that may be confusing the dropdown menu.

see screenshot.
hover.jpg
0
Marco GasiFreelancerCommented:
The menu drops but it remains hidden. Iìve tryed several things but with no success. Only setting position to absolute for the element .nav > li make the dropdown menu visible, but obviously in a wrong position.
I'll proceed to try to fix, but maybe you know something changed in the css...
0
Bob LearnedCommented:
Is that dropdown menu option supposed to be a toggle?  It seems to function as a toggle between blue and not blue.

Here are some Chrome debugging screen shots that show what happens to the <li> element.

Background red, option unchecked:

Toggle state
Background blue, option checked

Toggle state
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Marco GasiFreelancerCommented:
Got it: layout.css, line 95, comment out the 'overflow: hidden' rule for the element .container and your menu will be visible again.
Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
digitalwiseAuthor Commented:
Thank you!   Don't know why that suddenly caused the problem but THANK YOU!!
0
Marco GasiFreelancerCommented:
Mmmhh, that should have caused the problem from the start: it's quite logic that if the container hides what exceeds its limits all elements that exceeds those limits are automatically hidden. To use a metaphor, we could say that a div whose overflow property is set to visible is just like a solid wood panel: you can fis to it anything higher or wider and all will be visible; but if a div has its property overflow set to hidden, it'll act like a window and you will see only the part of elements which don't exceed the 'window' limits.

The metaphor is not perfect but I think it can meke it clear: since the navbar is within a div with class='container', setting its property overflow to hidden prevents the dropdown to be shown because it remains 'behind the wall' whereas the menu button is visible through the 'window'.

So I'm wondering why it worked before :-)

Cheers
0
sammySeltzerCommented:
So I'm wondering why it worked before :-)

Exactly my point in my own little post when I suggested that the problem had always been there.

Oh well...
0
Marco GasiFreelancerCommented:
@SammySeltzer: I agree the problem was there, but I  can't figure out which browser could ignore such a simple rule and make all the rest work fine :-)
I suspect that the rule has been inserted to solve a visualization problem found in some other page without considering the side-effect to hide the dropdown menu. Anyway, it seems evident that the root of evil was the overflow wrong value. If my suspect is well-founded, maybe we'll find soon another question about another page of this site...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.