Customize your menu in Wordpress to highlight active menu items with a unique style

I'm currently in the process of designing a WordPress template and focusing on customizing the menu. Here is what I have created so far:

http://jsfiddle.net/skunheal/Umkyr/

However, there are two minor issues that I am struggling to address. In WordPress, the active menu item is given the class .current_page_item. How can I style this particular item?

This is what I came up with:

Styling for normal menu items:

ul.dropdown a {
text-decoration : none;
font-family : verdana;
color : #3f89d2;
display : inline-block;
background-color : #FFF;
padding : 8px 15px 0 15px;
box-shadow : 0 0 10px #CCC inset;
width : auto;
height : 25px;
}

Styling for active menu item:

.current_page_item a {
background-color : #096;

}

Unfortunately, it does not seem to be working as intended. Any ideas on why this might be happening?

Thank you in advance, Merijn

Answer №1

Present the information in this format

 li.current_page_item a {
    color:#096
}

View Demo

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

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

How can I use Angular to automatically check a checkbox while a page is loading?

I have a list of checkboxes, and based on the selected checkbox, offers are displayed. Everything is working fine as expected. Below is the code snippet I have implemented: function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note ...

Amusing antics observed when hovering over a div in Firefox

Issue resolved, many thanks to all Here is the dilemma I am dealing with something like this <a href='http://google.com' class="buy_now" > <div class='yada yada' > Go </div> </a> buy_now changes backgro ...

As a useful tool in XML processing, xsl:value-of function effectively filters out any

When creating XML that contains HTML tags, the challenge arises when trying to convert all the XML data to HTML using XSLT. The issue lies in handling HTML tags included within the XML. Specifically, I need to retrieve the content within the summary tag wi ...

Angular Material Password Confirmation

Currently, I am working on implementing user authentication using Angular Material. Specifically, I am focusing on displaying the appropriate error message when the confirmed password does not match the initially entered password. Below is the snippet of ...

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

How can I incorporate JSON template files into a webpage using Elementor through coding?

I am currently working on setting up dynamic pages on a WordPress site using a bash script. My goal is to utilize Elementor for easy configuration by future users. After discovering that I can set the page template with an SQL command like this: INSERT I ...

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

flexible navigation bar with Bootstrap

I'm currently using Yamm with Bootstrap, but I'm encountering an issue where I need to make it flexible so that each list item will have the same spacing as the others. Additionally, I want to be able to add new list items in the future without d ...

Exploring the ways to access inner contents of a Div element using ajax

Looking to update the SQL database with a list of variables sent from an HTML page. Some data is being sent correctly, while others are not. The list is placed in a div divided into two parts: "h1" and another "div". The header data is being sent correctly ...

PHP file handling for reading and writing operations

I am currently learning PHP and attempting to create a PHP hit counter for a webpage. I have written the following code based on my understanding. The issue I am facing is that when I run the program in the terminal, I receive the correct output as expec ...

Restricting the amount of text that can be applied to an HTML5 canvas

Currently, I am in the process of developing a tree structure engine using an HTML5 canvas. In this engine, each tree node is connected to a database and has a unique name along with various other values. To represent these nodes visually, I have assigned ...

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

jQuery-UI tabs appearing on various elements

My web page layout includes three different divs: header, wrapper, and footer. The header is set to a fixed position. Within the wrapper, there are various components, including some jqueryUI tabs. However, as I scroll down the page, the wrapper and its ...

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

What causes the content of my container to disappear following a setInterval div swap in Internet Explorer?

While developing a website on Chrome and Firefox, I was informed that it also needs to function properly in Internet Explorer. I managed to resolve the double padding issue in IE, but now I'm facing a new problem. The content of my "grid" disappears a ...

What can I use instead of "display:none" in Javascript or Jquery?

A problem I encountered with my website involves a menu that toggles content visibility based on menu item clicks. The JQuery script responsible for this behavior is shown below: $(document).ready(function() { $("#bioLink").click(function(){ $ ...

Safari's problem with auto-filling forms

I am in the process of designing a payment form. I need to have the fields for credit card number and its expiry date set to autofill. The Chrome browser is functioning correctly, but Safari is not recognizing the expiry_date field for autofill. Below are ...

The table of 100 elements contained within a div does not expand to the width of the div, but

Here is a different layout to consider: <div style="float: left"> content1 </div> <div style="float: left"> <table width="100%"><tr><td>dfsd</td></tr></table> </div> Now, there is an issue where ...

Ensure that the video is properly positioned within the background when utilizing the background-size cover property

I am currently working on a project that requires me to position a video clip on a specific section of the background image, ensuring that the video always appears on top of the phone's screen. The responsive background image is constantly changing. H ...