CODEWITHSUNDEEP
jquerycssgoogle-chrometwitter-bootstrapdrop-down-menu
Wesley Pearce
Wesley Pearce

Reputation: 25

Bootstrap Dropdown Menu Not Showing Correctly in Google Chrome

I've developed a website using Bootstrap, and it's ready for launch however over the past week, the dropdown menu isn't containing all of the data properly on Chrome:

enter image description here

http://demo.altru.co.uk

try hovering over KS1&KS2 in the top nav on chrome, I've tried on a few machines and it's the same issue. It works fine on firefox and internet explorer.

To make things simpler, I can tell you there is no special styling on the bootstrap, it's just standard, so my question is, is it a bug in chrome or an issue with my code that's only affecting chrome?

Thanks everyone!

Upvotes: 2

Views: 1716

Answers (1)

Bojangles
Bojangles

Reputation: 101493

Curiously, this is being caused by the max-width property set on the <img> tags in the menu. Assuming you're only using .pad5right in the menu, you need to modify your CSS to get rid of the max-width: 100%` set by Bootstrap:

.pad5right {
    padding-right: 5px;
    max-width: none;
}

A more general style for any menu would be this:

.dropdown-menu img {
    max-width: none;
}

Quite a strange issue which took a while to solve, and likely a bug in Chrome.

Upvotes: 4

Related Questions