Customize Dropdown Menu

Question

I am using bootstrap on a website, and would like to customize its dropdown menu. Currently, it looks like the default navbar. The dropdown elements of the navbar get shown upon hover. What I would like to do is to add an icon next to each item in my navbar. I would then like the dropdown items to become visible upon hovering over the icon, not the text. How can that be achieved?

I have the following link for Home: <%= link_to _('Home'), home_path %> How do I add the image below to my link_to? "> — msc, Jul 31 '14 at 14:29

score 0 · Answer 1 · answered Jul 31 '14 at 14:42

You can try the ".disabled" class built into the Bootstrap theme. Referenced here: http://getbootstrap.com/components/#nav

            <li class="disabled"><a href="#">Disabled link</a></li>             
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

Customize Dropdown Menu

1 Answers1