Cannot style active menu element

Question

I have this responsive collapsable menu.

<nav class="navbar navbar-default">
        <div class="container-fluid col-md-12">
            <div class="col-md-2"></div>
            <div id="logo" class="col-md-3"></div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse col-md-6" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#"><span>Home</span></a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span>Drop1</span></a></li>
                            <li><a href="#"><span>Drop2</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Carriers</span></a></li>
                    <li><a href="#"><span>Contacts</span></a></li>
                </ul>
            </div>
        </div>
    </nav>

I added this code to add and remove "active" class for styling purposes:

<script>
        var selector = '.nav li';
        $(selector).on('click', function() {
            $(selector).removeClass('active');
            $(this).addClass('active');
        });
        </script>

Problem is, I cannot style the background color for active menu items. I've tried everything I can think of, and everything I could find, but with no success. I cannot change the bootstrap default color for some reason. Everything else is working as it should, I am able to style other elements, but not this for some reason. Here is a JSFiddle

rrk · Accepted Answer · 2016-03-11 11:32:13Z

2

Change selector to .nav li a. Because the CSS class active was being set for the li's and your style was for li > a.active.

Also use e.stopPropagation(); to prevent event from bubbling to parent elements.

var selector = '.nav li a';
$(selector).on('click', function() {
  $(selector).removeClass('active');
  $(this).addClass('active');
  e.stopPropagation();
});

DEMO

edited Mar 11, 2016 at 11:32

answered Mar 11, 2016 at 11:26

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mihail Ivanchev Over a year ago

I am marking your answer as the solution, because your code works in JSfiddle as it should, but on my menu it does not work properly. I guess something else is causing problems, but I don't know what. To describe the issue - when I press a button on the menu, nothing happens, it does not get selected, but when I click elsewhere on the page after that, the background that is desired, is shown. Also, this does not work for the dropdown menu - it stays the default grey colour from bootstrap3. I can upload the nav menu to a hosting and share it, if that would help you help me.

Cobote Over a year ago

Try CSS li > a.active:focus

Mihail Ivanchev Over a year ago

It's the same as before

James Gardner · Accepted Answer · 2016-03-11 11:38:12Z

0

This is because you are adding and removing the active class from '.nav li' but in your css you are styling 'li > a.active'. Therefore you need to either change your css to 'li.active' or change your javascript to var selector = .nav li a in order to match your css styling.

answered Mar 11, 2016 at 11:38

James Gardner

5062 silver badges7 bronze badges

Comments

Jai · Accepted Answer · 2016-03-11 11:40:50Z

You can do this:

var selector = '.nav li';
$(selector).on('click', function(e) {
  $('> a', selector).removeClass('active'); // just remove the class to the anchor
  $('> a', this).addClass('active'); // add the class to current anchor
  
  // $(selector).find('> a') === $('> a', selector)   
  
  e.stopPropagation(); // stop the event to bubbleup
});

li > a.active {
  background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid col-md-12">
    <div class="col-md-2"></div>
    <div id="logo" class="col-md-3"></div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse col-md-6" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="#"><span>Home</span></a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
          <ul class="dropdown-menu">
            <li><a href="#"><span>Drop1</span></a>
            </li>
            <li><a href="#"><span>Drop2</span></a>
            </li>
          </ul>
        </li>
        <li><a href="#"><span>Carriers</span></a>
        </li>
        <li><a href="#"><span>Contacts</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

oboshto · Accepted Answer · 2016-03-11 11:45:24Z

0

Look at this fiddle https://jsfiddle.net/oboshto/tcwgvj70/8/

You should use another selector for your query. Also you can use .toggleClass() for adding/removing the class

    var selector = '.nav li a';
    $(selector).on('click', function(e) {
      $(selector).toggleClass('active');
      e.stopPropagation();
    });

answered Mar 11, 2016 at 11:45

oboshto

3,6674 gold badges27 silver badges25 bronze badges

Collectives™ on Stack Overflow

Cannot style active menu element

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related