Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Bootstrap Adding a Dropdown Menu and Glyphicons

Posted by Asad CSE
Asad CSE
Courses Plus Student 566 Points

Drop Down menu is not working on some mobile devices

Hi Guil & Others, I have created several dropdown menus by the earning knowledge of this tutorial,my drop down menus working fine on PC,iPad and Tablet but it's not working on some mobile devices.What's the wrong here?I'm feeling trouble with my projects,please help me.Here the website i'm creating http://beautifulsylhet.com/ and i'm feeling trouble with dropdown menus.

3 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Ok so I was looking at your code, and realized that you were using boostrap for the drop downs. I have never used boostrap before, but based on their website, it seems like the dropdowns were strictly used with buttons, something that your code doesn't seem to have for the actual dropdown links. I believe that you need to try one of these solutions:

  1. Add the attribute role with the value of button to your dropdown links, so that they are registered to use javascript instead of changing the page. Basically I think your links are unselectable because they have no hrefs associated with them, so adding this attribute should at least make the link selectable.
<a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button">Tea Gardens<b class="caret"></b></a>
  1. Maybe some of your custom css is overriding the specific code to get the boostrap dropdown working. Check with the documentation of Boostrap to make sure that you are using the correct method of aligning your dropdowns.

Hopefully this will help.

(Edited For Better Answer) - Dane Parchment

Asad CSE
PLUS
Asad CSE
Courses Plus Student 566 Points
Asad CSE
Asad CSE
Courses Plus Student 566 Points

Dane, I'm not sure what you wanted to say.I'm feeling trouble.I need some suggestions from <a href="https://teamtreehouse.com/guil">Guil Hernandez</a>

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

I updated my previous answer to be much more helpful.

Asad CSE
PLUS
Asad CSE
Courses Plus Student 566 Points
Asad CSE
Asad CSE
Courses Plus Student 566 Points

Thanks a lot Dane! It's now working fine!