1

I have the following code:

%a.dropdown-toggle-nav.no-active(data-toggle='dropdown' href='')
        Accounts
        %i.icon-caret-down
      %ul.dropdown-menu(role='menu')
        ...

Shown Below:

enter image description here

What I would like to do is separate out the anchor and caret functionalities. When I click on Accounts, it is an anchor tag brings me to a specific page and when I click on the caret, it toggles the dropdown element (staying on the same page).

I tried to put them in 2 separate Anchor Tags:

      %a.dropdown-toggle-nav.no-active(href=accounts_requests_path)
        Accounts
      %a.dropdown-toggle-nav.no-active(data-toggle='dropdown' href='')
        %i.icon-caret-down
      %ul.dropdown-menu(role='menu')

But this puts the elements on 2 separate lines due to bootstrap css, and I want to keep the caret right next to the text. I thought about using absolute positioning to force the caret to be right next to the text, but there must be a better solution.

Any Ideas?

Ninja
  • 1,012
  • 3
  • 14
  • 29
  • Have you thought about UX? How will people know that they can click on either? – Christina Oct 29 '14 at 23:53
  • This is not the best decision, I understand, but this is what my boss wants, so I will simply implement it. – Ninja Oct 29 '14 at 23:55
  • make a class for the links in that li that are inline-block rather than block. That will put them on the same line. Something like. .custom-nav .navbar li.double-trigger > a {display:inline-block;} You'll also need other styling and may have to use !important unless you get very specific with your css. Look at an unminified version of the navbar nav when it's stacked so you can see how it's done. – Christina Oct 30 '14 at 01:37
  • The indentation in your code is wrong, what you have at the moment will cause a syntax error. – matt Oct 30 '14 at 12:06

0 Answers0