CSS Troubleshoot: Unable to Change Background of Current Menu Page Item

I've been attempting to add a small graphic using CSS to indicate the current page the viewer is on, but for some reason, it's not highlighting properly. Below is my code:

HTML:

 <ul class="side-nav">
 <a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
 <a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
 <span>Sample Page</span></li></a>
 </ul>

CSS:

 ul.side-nav span{
  margin-left: 50px;    
  text-decoration: none;
  color: #fff;
  }
 ul.side-nav a li{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
 list-style: none;
 height: 41px;
 width: 250px;
 line-height: 2.0;
 text-decoration: none;
 }
 ul.side-nav a li:hover{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }
 ul.side-nav a li.current-menu-item{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;  
}

Everything seems correct, but I can't seem to change the background as intended. It could be due to the order of the "current-menu-item." Any thoughts or advice would be greatly appreciated.

Url : Thanks in advance.

Answer №1

If you want to style your navigation menu items differently based on the page, you can assign IDs to the body and li tags in your HTML code and reference them in your CSS. This approach allows you to achieve this using pure CSS.

HTML

<body id="home-body"> // ... on your home page

...

<body id="about-body"> // ... on your about page

Your nav

<li id="home-menu">Home</li>
<li id="about-menu">About</li>

CSS

body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }

You may also find my response to a similar query helpful: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

EDIT: While this method is considered the "pure css" way, there are other approaches available depending on your specific requirements.

Answer №2

VIEW THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/

Your HTML and CSS need some fixing:

HTML

<ul class="side-nav">
<li><a href="#">Home</a></li>
<li class="current-menu-item"><a href="#">Current</a></li>
</ul>

The <a> tag should be inside the <li> tag, with text properties applied to the <a>. Also, don't forget to add the class current-menu-item to the active <li>.

CSS

ul.side-nav {
    margin-left: 50px;    
    text-decoration: none;
    padding:0px;
    list-style: none;
    width: 250px;
 }
 ul.side-nav li{
     padding:0px;
     margin:0px;
     display:block;
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
     height: 41px;
     cursor:pointer;  
 }
ul.side-nav li a {
    margin:0px;
    display:block;
    padding-left:50px;
    text-decoration:none;
    color: #fff;
    height:41px;
    line-height:41px;
}
ul.side-nav li a:hover, 
ul.side-nav li.current-menu-item {
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }

There are some minor adjustments needed in the code. Make sure to review it carefully.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update search results when performing a new search on a web application (without using jQuery)

My simple web app interacts with an API to retrieve search results from a database and utilizes ajax to insert them into an empty ul element on the page (employing JSONP for cross-domain requests). I am struggling to achieve this functionality using plain ...

What is the best way to eliminate YouTube branding from a video embedded in a website?

I am currently utilizing an <iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> This setup removes the "YouTube" logo from the ...

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

Establish a primary background color for the React application, with the majority of the display content

I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...

Show ng-message when email is invalid in Angular Material without using ng-pattern

I need to show an error message that says Please enter valid email. when an invalid email is entered, but I cannot use the ng-pattern attribute with this specific regex pattern. <md-input-container class="md-block" flex-gt-xs> <label>Ema ...

Modifying the default class styles from Bootstrap based on the HTML displayed in Devtools

I am attempting to customize the styles of my application using bootstrap. Upon inspecting the HTML in Chrome Devtools, I found the following rendered code: <div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 bord ...

Is there a way to implement an onclick event for every iframe within a document using jquery?

I have a webpage containing two iframes that can be switched using a selector. My goal is to implement an onclick event that will trigger a URL for specific <rect> elements within the iframes. After reading a helpful post on accessing iframe childr ...

Execute a PHP function using JavaScript/jQuery with AJAX requests

Hello everyone, I am reaching out for assistance with AJAX as I am still quite new to it. Despite the abundance of examples available, I find it challenging to grasp the concept. Specifically, I need help with my validation of a contact form using JavaScri ...

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

Tic Tac Toe is not functioning properly

Hey there! Can someone please help me figure out what's going on? I'm trying to create a Tic Tac Toe game, but instead of using "O" and "X" to mark the fields, I want to use different colors. Specifically, one player should be able to mark with b ...

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

When the page is refreshed, the value bounces back and forth between

I've encountered a strange issue on my page with 6 textboxes. Whenever I enter values into these text boxes and then refresh the page, the values seem to jump to the next textbox (the one after the next). For example, if I enter values as follows: [ ...

Why is my link not being acknowledged by its parent <div>?

I am facing an issue where a <a> tag inside a <div> element is not being recognized properly, causing the <div> height to remain unchanged and not accommodate the link as intended. You can view my HTML/CSS code here: http://jsfiddle.net/ ...

What is the process for updating the background color of the header in ngx datatable?

I am looking to change the background color of the table header to blue. This is the HTML code I have: <ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHe ...

JavaScript is not designed to run a second time

Currently, I have a script set up using $(document).ready(). It works perfectly upon initial loading. However, I also need this script to execute whenever the user changes an HTML select control. Ideally, upon page load, I want the filter and sort functio ...

How can I fix my HTML Image input not redirecting when clicked?

I have successfully implemented the following code: <input type="button" name="btnHello" value="Hello" onclick="Test();"/> Here is the JS function that accompanies it: function Test() { window.location.href = "Page2.aspx"; } Initially, clicking ...

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

Discover a new method for mastering jQuery Draggable: an advanced technique

Click here for the interactive demo. I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example b ...

A step-by-step guide on showcasing database data on an HTML page using jQuery

I am currently using jQuery to make an HTTP GET request and fetch JSON data from a database. After executing the request, I received the JSON array successfully. Now, I am attempting to display this JSON data on an HTML page by using the jQuery $(newData ...