Question

i’ve got a problem with the CSS. Normally I can get it right, but now it’s just not working for me.

Got the menu-code

<nav>
    <ul class="ca-menua">
        <li class="home"><a href="#home" id="1" class="tooltip"><div class="ca-icona">O</div><span>Home</span></a>
        </li>
        <li class="info"><a href="#info" id="2" class="tooltip"><div class="ca-icona">e</div><span>Info</span></a>
        </li>
        <li class="komp"><a href="#komp" id="3" class="tooltip"><div class="ca-icona">S</div><span>Kompetencer</span></a>
        </li>
        <li class="cases"><a href="#cases" id="4" class="tooltip"><div class="ca-icona">F</div><span>Cases</span></a>
        </li>
        <li class="kontakt"><a href="#kont" id="5" class="tooltip"><div class="ca-icona">@</div><span>Kontakt</span></a>
        </li>
    </ul>
</nav>

The i’ve got the javascript which add’s the active class.

<script type="text/javascript">      
    $(document).ready(function(){
        $('.home a.tooltip').addClass('active');
    });
</script> 

<script type="text/javascript"> 
$(function() {
    $('a.tooltip').click(function(e) {
        var $this = $(this);
        $("#nav").load($this.attr('href'));
        $('a.tooltip').removeClass('active');
        $(this).addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});
</script> 

This works fine, and adds the class, but I just can’t get the CSS right!

I need some help with a prob. small problem.
The website link is: HERE

THE CSS:

a.tooltop.active{
    color: #f3cb12;
    font-size: 50px;
}

Answer 1

Just add the div part into a.tooltip.active selector so you get something like this:

a.tooltip.active div {
    color: #F3CB12;
    font-size: 50px;
}

I have assumed that you are trying to get the icon bigger and highlighted if the menu item is active. The problem is that it is not the anchor that should be getting new styles, but the child div element.