Changing color of the navigation menu links

Question

So the problem is when I first go on my site those 3 links are blue and after clicking any of them they turn orange and the last clicked one stays darker/reddish for navigation purposes. I want it to be that orange color by default when you go on the page not only after clicking any of the links.

 <ul class="nav" >
    <li><a href="champions.php">Champions</a></li>
    <li><a href="items.php">Items</a></li>
    <li><a href="changes.php">Changes</a></li>
    </ul>

css part:

.nav {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;

    }

.nav li:hover{
    background: #cccccc;
}
.nav li{

    background: a0a0a0;
    padding: 2px;
    display:inline-block;
    margin-right: 5px;
  position: relative;
  box-shadow: 
    1px 1px #cccccc,
    2px 2px #cccccc,
    3px 3px #cccccc;
  transition: all 0.1s ease-in;

}
.nav li:active{

box-shadow: none;
  top: 3px;
  left: 3px;
}
.nav li a{

    text-decoration: none;
    }   
.nav li a:hover{ color:orange; }

and jquery

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('.nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();

        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }

        $('.nav li a').addClass("undnone");
        $(this).removeClass("undnone").addClass("und");
        return false;


    });

});

A little more css (from jquery)

.und
{
    color: red;
    text-decoration: none;`
`}
.undnone{
    color: #fc7425;
    text-decoration: none;
}

score 0 · Answer 1 · answered Jun 18 '14 at 18:48

0

Change

.nav li a{

text-decoration: none;
}

to

.nav li a{

text-decoration: none;
color:orange;
}

Here is an example

answered Jun 18 '14 at 18:48

BuddhistBeast

2,652
2
21
29

The problem is with this answer that it skips the jquery code I want the link that is clicked to stay red for navigation so when you are in items it stays red and rest is orange – Higeath Jun 18 '14 at 19:00

Satwik Nadkarny · Answer 2 · 2014-06-18T19:22:58.903

0

All you want is the link elements to be colored Orange by default, then you will have to move the property

color:orange;

from

.nav li a: hover { }

to

.nav li a { }

So, your class should be as:

.nav li a {
    text-decoration: none;
    color:orange;
}

You can see that here-> http://jsfiddle.net/79sZL/

UPDATE:

If you want a link to stay 'active' once its clicked and remain as such till another link is clicked (redering this as 'inactive') then you can do such with jQuery:

$(document).ready(function () {
    $('.nav li a').click(function (event) {
        $('.nav li a').removeClass('red');
        $(event.target).addClass("red"); 
    });
});

See this-> http://jsfiddle.net/79sZL/2/

Hope this helps!!!

edited Jun 18 '14 at 19:22

answered Jun 18 '14 at 18:50

Satwik Nadkarny

5,086
2
23
41

The problem is with this answer that it skips the jquery code I want the link that is clicked to stay red for navigation so when you are in items it stays red and rest is orange – Higeath Jun 18 '14 at 18:55
@Higeath I've updated my answer based on your comment!! I may have misunderstood your comment, so let me know if this solves your issue!! – Satwik Nadkarny Jun 18 '14 at 19:23

Eric Lagergren · Answer 3 · 2014-06-18T19:05:31.277

-1

Perhaps I'm not fully understanding the question, but if you don't want blue links, and instead want orange, just set the a color to orange like so:

.nav li a {
color: orange;
text-decoration: none;
}

To make the jQuery override the orange, change .und's css to:

.und {
color: red!important;
}

edited Jun 18 '14 at 19:05

answered Jun 18 '14 at 18:48

Eric Lagergren

501
2
7
18

The problem is with this answer that it skips the jquery code I want the link that is clicked to stay red for navigation so when you are in items it stays red and rest is orange – Higeath Jun 18 '14 at 19:01
then when I open the page there is underlining + it still removes the jquery code it doesn't stay red the clicked link – Higeath Jun 18 '14 at 19:07
@Higeath even with the !important..? – Eric Lagergren Jun 18 '14 at 19:10
now it works perfect except it changes permanently clicked link to red so after clicking them one by one all of them are red – Higeath Jun 18 '14 at 19:13
@Higeath then you should check this SO answer: http://stackoverflow.com/a/15833068 or just add in a line of jQuery that removes previous .und classes wen you click a new link – Eric Lagergren Jun 18 '14 at 19:23

Changing color of the navigation menu links

3 Answers3