bootstrap navbar toggle not working for mobile

Question

I have a JSfiffle

https://jsfiddle.net/zuer7g75/1/

    <ul class="dropdown-menu">
    <li>
        <a href="/camera-photo">
            Camera &amp; photo
        </a>
    </li>
    <li>
        <a href="/cell-phones">
            Cell phones
        </a>
    </li>
    <li>
        <a href="/others">
            Others
        </a>
    </li>
    </ul>

</li>
<li>
    <a  href="/apparel">
        Apparel
    </a>
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        &nbsp;<i class="fa fa-angle-down"></i>

    </a>

    <ul class="dropdown-menu">
    <li>
        <a href="/shoes">
            Shoes
        </a>
    </li>
    <li>
        <a href="/clothing">
            Clothing
        </a>
    </li>
    <li>
        <a href="/accessories">
            Accessories
        </a>
    </li>
    </ul>

</li>
    <li>
        <a href="/digital-downloads">
            Digital downloads
        </a>
    </li>
    <li>
        <a href="/books">
            Books
        </a>
    </li>
    <li>
        <a href="/jewelry">
            Jewelry
        </a>
    </li>
    <li>
        <a href="/gift-cards">
            Gift Cards
        </a>
    </li>


        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <form action="/search" method="get" onsubmit="return check_small_search_form()">    <div class="search_box pull-right">
    <input type="text"  id="small-searchterms"  autocomplete="off"
                value="Search store" name="q"  onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>

Expected behaviour is like this.

1 When I click on any parent category text ( for example computers) , it should lead me to the category page. 2 when I click on the down arrow for the category it should expand and show the subcategory items

All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.

What am I doing wrong here?

Answer 1

You can just make the a tags within the li to float left, then it should work.

.navbar-default .navbar-nav>li>a {
    float:left;
}

Please change the css to be relevant to your project.

In order to get the clicking of the arrow down to work:

1. close all other drop downs that are currently visible.
2. remove the "open" class from all OTHER li.
3. toggle the open class from the current li that corresponds to our click.
4. toggle the visibility of the drop down that corresponds to our click.
5. Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.

Please see: https://jsfiddle.net/qynfvow3/30/

Answer 2

By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/

$(document).ready(function() {
  $('.navbar a.dropdown-toggle').on('click', function(e) {
    var elmnt = $(this).parent().parent();
    if (!elmnt.hasClass('nav')) {
      var li = $(this).parent();
      var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
      var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;

      if (!li.hasClass('open')) li.addClass('open')
      else li.removeClass('open');
      $(this).next().css('top', heightParent + 'px');
      $(this).next().css('left', widthParent + 'px');

      return false;
    }
  });
});


function setMouseHoverDropdown() {
  if ($(window).innerWidth() > 767) {
    $('ul.nav li').hover(function() {
      $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });
  }
}
$(window).load(function() {
  setMouseHoverDropdown();
});
$(document).ready(function() {
  setMouseHoverDropdown();
});
$(window).resize(function() {
  setMouseHoverDropdown();
});

.fa-angle-down {
  float: right;
  margin-top: -50px;
}
a.dropdown-toggle {
  height: 10px;
  padding-bottom: 0px!important;
  line-height: 1!important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<body>
  <div class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <div class="collapse navbar-collapse category-navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/"><span class="glyphicon glyphicon-home"></span></a>

          </li>
          <li> <a href="/computers">
            Computers
        </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            &nbsp;<i class="fa fa-angle-down"></i>
           
        </a>

            <ul class="dropdown-menu">
              <li> <a href="/desktops">
                Desktops
            </a>

              </li>
              <li> <a href="/notebooks">
                Notebooks
            </a>

              </li>
              <li> <a href="/software">
                Software
            </a>

              </li>
            </ul>
          </li>
          <li> <a href="/electronics">
            Electronics
        </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         &nbsp;<i class="fa fa-angle-down"></i>
          
        </a>

            <ul class="dropdown-menu">
              <li> <a href="/camera-photo">
                Camera &amp; photo
            </a>

              </li>
              <li> <a href="/cell-phones">
                Cell phones
            </a>

              </li>
              <li> <a href="/others">
                Others
            </a>

              </li>
            </ul>
          </li>
          <li> <a href="/apparel">
            Apparel
        </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            &nbsp;<i class="fa fa-angle-down"></i>
           
        </a>

            <ul class="dropdown-menu">
              <li> <a href="/shoes">
                Shoes
            </a>

              </li>
              <li> <a href="/clothing">
                Clothing
            </a>

              </li>
              <li> <a href="/accessories">
                Accessories
            </a>

              </li>
            </ul>
          </li>
          <li> <a href="/digital-downloads">
                Digital downloads
            </a>

          </li>
          <li> <a href="/books">
                Books
            </a>

          </li>
          <li> <a href="/jewelry">
                Jewelry
            </a>

          </li>
          <li> <a href="/gift-cards">
                Gift Cards
            </a>

          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <form action="/search" method="get" onsubmit="return check_small_search_form()">
              <div class="search_box pull-right">
                <input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
              </div>
            </form>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>