Bootstrap Dropdown Make Dropdown arrow change Direction

Question

I am looking for a way to make the bootstraps dropdown menu arrow change directions from facing up when menu is closed and down when menu is open.

This is my html code:

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

I think it would be easiest to do in js.

Here is my jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/

Thank you.

Solution 1

I just encountered the same issue. I wanted to make the caret icon look up when dropdown was active, and normal (down) when it was not. This is my solution:

<style>
  .caretup {
    transform: rotate(180deg);
  }
</style>
<script>
  $(function(){
    $(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
      $(this).find(".caret").toggleClass("caretup");
    });
  });
</script>

That's it!

Solution 2

Try this code.

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class='caret' id='menu-caret'></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><a href="/signout">Sign Out</a></li>
            </ul>
          </li>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

and add script

<script>  
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn();
      $('#menu-caret').addClass('glyphicon glyphicon-chevron-up');
      $('#menu-caret').removeClass('caret');
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
      $('#menu-caret').addClass('caret');
      $('#menu-caret').removeClass('glyphicon glyphicon-chevron-up');
    }); 
</script>

remove onhover css in ur CSS

refer this fiddle http://jsfiddle.net/7o8sLhgf/

Comments

[Adi]

Would be great if you could add link to jsfiddle. This will reduce the time to setup a bootstrap project to answer your question, and more likely to get an answer quickly. Thanks

[Nagesh Sanika]

check your code properly @Pabi . at <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>, so add id there it will work

[Pabi]

Doesn't seem to work for me the dropdown arrow icon hasn't changed. And doesn't change when I hover over it

[Nagesh Sanika]

small change - use caret caret-up instead of glyphicon glyphicon-chevron-up

[Admin]

I believe the code #279ddd corresponds to dark blue.

[Admin]

It's the line... ul.dropdown-menu { background-color: #279ddd; }

[Admin]

Also, you do ul.dropdown-menu {background-color: #279ddd;} twice