Bootstrap drop down options not visible on smart phone

HTML & CSS
1

My drop down with Bootstrap works but when I tested it on my Android phone through Chrome the drop down options are not seen when link is clicked.

How can I correct this?

2

Hi, brian34,

We will need to see the working page to be able to evaluate the problem. Can you post a link to your site?

3

Link to website is

Download link are Software and Support.

Thanks for helping.

4

brian34, is the menu a third party add-on or is it the mobile menu that comes with Bootscrap? Are you familiar enough with JavaScript to modify the JS that you have?

I can see that you are making gradual improvements to your site. Good for you!

If I may, I would like to recommend that you take advantage of the HTML validator to help you find and fix several coding problems on your pages.
https://validator.w3.org/nu/
https://validator.w3.org/nu/?doc=http%3A%2F%2Fisalutesoftware.com%2Findex.html

Our Bootstrap expert had a new addition in his family this past week so he is doing grandfather duty this weekend. We might see him Monday.

1 Like
5

On my Android device, the “software” dropdown works fine. The “support” dropdown also works, although at first it appears not to, because it requires scrolling the menu to see the dropdown items.

Removing

.navbar-collapse.in {
    overflow-y: auto;
}

prevents this behaviour and makes the dropdown visible (but may introduce other issues; I didn’t test thoroughly ).

6

You shouldn’t change any of the default bootstrap classes directly but use your own over-rides otherwise you change the whole system.

The problem with the dropdown is that the absolute element is appearing outside of the container so you need to set a new block formatting context so that the absolute element is recognised as being inside the container.

This should do the trick without affecting any bootstrap behaviours.

#myNavbar.in{
display:table;
width:100%;
}

I see that you have a .container-fluid nested inside a .container but in bootstrap you cannot nest containers and is the first rule they mention in their documentation.

3 Likes
7

Thanks for reminding me about the validator. I used it to correct alot of mistakes brought over from the old website.

8

Added this code to my style.css sheet. Seem to work better.
And removed the nested container and remove -fluid from container.

Thanks for your help.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.