Is there a way to personalize the appearance of a specific page title in my navigation menu?

I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name.

Although my CSS code works well for all page names except the current one:

.navbar-nav li a {
    font-family: georgia;
    font-color: #e7a0c0;
    background-color: #e7a0c0;
}

This is how it appears now. I want "About Me" to have a pink background instead of grey and the rest to have white backgrounds. Strangely, I am unable to change the text color even though I can modify the font and other properties.

javascriptjqueryhtmlcsswordpress

Answer №1

Implement this

li.active-menu-link a {

font-family: georgia;
font-color: #e7a0c0;
background-color: #e7a0c0;

}

Answer №2

Check out your HTML menu items and locate the active class called ".current-menu-item". If that doesn't work, try utilizing Wordpress's built-in function to display the menu:

wp_nav_menu( array $args = array() )

I'd like the "about me" section to have a pink background rather than grey.

To achieve this in your CSS file, add the following:

.navbar-nav li.current-menu-item a{
   background-color: #e7a0c0;}

For all other sections, make the background white.

.navbar-nav li a{
   background-color: #fff;}

I'm facing an issue where I can't change the text color despite being able to modify fonts and other elements.

This may be because you're using font-color instead of color, so replace it with the correct code:

.navbar-nav li a {
  font-family: georgia;
  color: #e7a0c0;
  background-color: #fff;
}

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

jQuerry's on method fails to respond to newly added elements through the clone() function

I always thought that jquery's on() function would handle events for dynamically added elements in the DOM, such as those added via ajax or cloning. However, I'm finding that it only works for elements already attached to the dom at page load. Cl ...

javascriptjquery

Modify the Text Displayed in Static Date and Time Picker Material-UI

Looking to update the title text on the StaticDateTimePicker component? Check out this image for guidance. In the DOM, you'll find it as shown in this image. Referring to the API documentation, I learned that I need to work with components: Toolbar ...

javascriptreactjstypescriptmaterial-ui

Invalid Data Pusher for User Information in Next JS

Hello everyone, I've been practicing using Pusher with Next.js but encountered an issue where it's showing Error: Invalid user data: 'presence-channel' and I can't seem to solve it no matter how hard I try. Could someone please he ...

javascriptreactjsnext.jsnext-auth

Adjusting the gaps between each item in a list

Currently, I am working on developing a minimalist single-page website. However, I am facing challenges with spacing in the navbar section (as demonstrated below). When using an unordered list, everything looks good until the list overlaps with the centra ...

htmlcssnavbar

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...

htmlcss

Fluid pictures in Mozilla Firefox not fluid

My images are shrinking in Chrome, as expected, but they don't adjust their size in Firefox and IE9. I'm using the CSS below: .pics img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ border: 1px solid #CCC; }​ ...

cssresponsive-design

Stacking images with CSS styling

I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...

htmlcsstwitter-bootstrapresponsive-design

What is the best way to ensure that cleanup is always executed at the conclusion of a function

Imagine a scenario where I have the following function (psuedo-code) : function Foo() { let varThatNeedsCleanup = //something if(condition1) { return Error1; } if(condition2) { return Error2; } if(condition3) { return Error3; ...

javascriptnode.js

CSS Dropping Down Menu Design

Hello everyone! I am taking my first step into web development and currently in the process of revamping my DJ website. Check out my updated site here: I am working on creating a dropdown div within the top-left menu that will display information about t ...

cssdrop-down-menu

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

htmlcss

Joomla website experiencing issues with Bootstrap popover functionality

Just wanted to share that I am currently working on this page: I found an example that inspired me from here: I have a feeling that Joomla might be including a resource that is causing conflicts with the popover not showing. This is the code snippet I h ...

javascripttwitter-bootstrapjoomlapopover

Postgres Array intersection: finding elements common to two arrays

I'm currently developing a search function based on tags, within a table structure like this CREATE TABLE permission ( id serial primary key, tags varchar(255)[], ); After adding a row with the tags "artist" and "default," I aim ...

javascriptsqlpostgresqltypescriptknex.js

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating

As part of my Angular project, I am currently focusing on writing unit test cases using the Jasmine Framework and Karma. To ensure thorough testing coverage, I am utilizing Coverage-html (Istanbul). When it comes to coverage, there are several important t ...

javascriptangularjsjasminekarma-jasmineistanbul

Highcharts displaying black color after AJAX refresh

Struggling to implement real-time data visualization using Highcharts, I found myself tired of sifting through documentation and feeling confused. My solution involves using AJAX refresh. When the page initially reloads, my chart renders properly. However, ...

javascriptphpjqueryajaxhighcharts

React component's state is not being correctly refreshed on key events

Currently facing an issue that's puzzling me. While creating a Wordle replica, I've noticed that the state updates correctly on some occasions but not on others. I'm struggling to pinpoint the exact reason behind this discrepancy. Included ...

javascriptreactjstypescript

Navigate back to the previous page upon form submission to a PHP file, with a div dynamically populated with targeted content

I'm facing a logic dilemma: I have a webpage with a div called #content, where I've embedded another page containing a form for submitting data* (there are other pages loaded into #content as well, but they are not active at the same time, one o ...

phpjqueryhtmlajax

Utilizing jQuery to Detect TAB Key Press in Textbox

I need to detect when the TAB key is pressed, prevent the default action from occurring, and then execute my custom JavaScript function. ...

javascriptjquery

Executing getJSON requests in perfect synchronization of time

For my weather project, I have two JSON requests to make. The data from the first request is needed in order to personalize the second request for the user. The first request retrieves the latitude and longitude of the user, which are then required for the ...

javascriptjqueryjsonajaxjquery-deferred

Retrieve data from backend table only once within the bootstrap modal

How can I retrieve values from a table once a modal is displayed with a form? I am currently unable to access the values from the table behind the modal. Are there any specific rules to follow? What mistake am I making? I would like to extract the values ...

javascriptjqueryhtmltwitter-bootstrap