Styling your navigation with a CSS background

Question

Styling your navigation with a CSS background

Having trouble creating a custom CSS navigation for my website. Below is the code snippet of my attempt at a vertical navigation:

<style type="text/css">

/* Custom stylesheet */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* Container styling */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}

/* List elements containing links */
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 250px;   
}

/* Link styles */
#cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 210px;

        /* Typography */
        font-family: Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;

        /* Background & effects */
        background: #282828;
    }

    /* Hover state styling */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #000;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
        background: #A9CA6F;
        background: -webkit-linear-gradient(bottom, #A9CA6F, #B4D876);
        background: -ms-linear-gradient(bottom, #A9CA6F, #B4D876); 
        background: -moz-linear-gradient(bottom, #A9CA6F, #B4D876);
        background: -o-linear-gradient(bottom, #A9CA6F, #B4D876);
        border-color: transparent;
    }
    
</style>

Struggling to make the clicked link change its background to #A9CA6F. I want the <li> with an active id/class to maintain this color. Any insights?

Thanks in advance!

Feel free to check out the demo on JSFiddle here.

html css

Answer 1

Answer №1

Include the following code...

#cssmenu li.active a {background-color:#A9CA6F;}

It seems that adding the background color to the a element and targeting it specifically should do the trick. I've provided a link to a fiddle where I made this adjustment in your CSS. Ensure you are specific enough in targeting the element so that it overrides the default style.

UPDATE

To clarify, based on your existing CSS:

#cssmenu > ul li a {...}

In order to target the active class, your selector needs to be even more specific than what you currently have. Otherwise, the rule above will take precedence over all others. Therefore:

#cssmenu > ul li.active a {...}

Instead of...

li.active a  {...}

For instance, in a hypothetical CSS battle...

#menu a would defeat a.active
a.active would trump just a
#wrapper #menu a would surpass #menu a

:-) Hope this helps!

Answer 2

Include the following code...

#cssmenu li.active a {background-color:#A9CA6F;}

It seems that adding the background color to the a element and targeting it specifically should do the trick. I've provided a link to a fiddle where I made this adjustment in your CSS. Ensure you are specific enough in targeting the element so that it overrides the default style.

UPDATE

To clarify, based on your existing CSS:

#cssmenu > ul li a {...}

In order to target the active class, your selector needs to be even more specific than what you currently have. Otherwise, the rule above will take precedence over all others. Therefore:

#cssmenu > ul li.active a {...}

Instead of...

li.active a  {...}

For instance, in a hypothetical CSS battle...

#menu a would defeat a.active
a.active would trump just a
#wrapper #menu a would surpass #menu a

:-) Hope this helps!

Answer 3

Answer №2

To implement this style, use the following code:

#navigation > ul li.active a{
    background-color: #A9CA6F;
}

See it in action

Answer 4

To implement this style, use the following code:

#navigation > ul li.active a{
    background-color: #A9CA6F;
}

See it in action

Answer 5

Answer №3

If you need to navigate within the same page using JavaScript, you can try this jQuery solution:

$("#menu li").click(function(){
    $("#menu li").removeClass('active');
    $(this).addClass('active');
});

Check out this jsfiddle example

This code will move the CSS class ".active" to the clicked li element. You can then style the active link in your CSS with a selector like this:

#menu > ul li.active a

Answer 6

If you need to navigate within the same page using JavaScript, you can try this jQuery solution:

$("#menu li").click(function(){
    $("#menu li").removeClass('active');
    $(this).addClass('active');
});

Check out this jsfiddle example

This code will move the CSS class ".active" to the clicked li element. You can then style the active link in your CSS with a selector like this:

#menu > ul li.active a

Answer 7

Answer №4

Give this a try and visit the following fiddle: http://jsfiddle.net/sarfarazdesigner/WT9Uw/3/

#cssmenu > ul li.active > a, #cssmenu > ul li.active > a {
   background-color:#A9CA6F;            
   color: #000;
}

Answer 8

Give this a try and visit the following fiddle: http://jsfiddle.net/sarfarazdesigner/WT9Uw/3/

#cssmenu > ul li.active > a, #cssmenu > ul li.active > a {
   background-color:#A9CA6F;            
   color: #000;
}

Styling your navigation with a CSS background

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for playing a video uploaded directly into Vue-plyr

Changing the color of a checkbox in React JS when it is checked: a step-by-step guide

Utilizing jQuery Validate to individually verify different sections of a form

Set the datepicker to automatically show today's date as the default selection

I would like to split the window into four columns and populate each one with images

The relationship between parent and child elements in CSS

Clicking on a jQuery element will reveal a list of corresponding elements

What is the best method to check BNB token balance in a React application using the Metamask wallet

Use the css file specifically for iPad devices

Is it feasible to utilize the .fadeTo() function in jQuery multiple times?

utilizing the power of Ajax in Laravel version 5.7

Having trouble with compiling SCSS code

establishing a CSS class for the containing element of an active route link in Angular version 2 or later

Getting rid of the 'label' decorator in Zend 2 forms

Ways to ensure <li> elements remain anchored to the top and bottom of <ul> element while scrolling

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

Illustrative Python Django email submission form demo

Encountering a 422 Unprocessable Entity error when the search bar in the frontend is empty - What is the best way to handle

How to Show Extensive Content in an Android WebView with a Fixed Height

Combining HTML code with PHP for seamless integration into a webpage