• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

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
0
digitalwise
Asked:
digitalwise
1 Solution
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now