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

How to retrieve multiple checked values from checkboxes in Semantic UI React

Trying to enable users to select multiple checkboxes in react using semantic-ui-react. I am new to react. Here is my code: class ListHandOver extends React.Component { state = { data: {} } handleChange = (e, data) => { console.log( ...

javascriptreactjscheckboxsemantic-ui-react

Steps to gather all the images within a directory

Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...

javascriptjquerycssbackbone.js

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

javascriptjqueryhtmlcss

Tips for setting unique click functions for each face of a cube using React Three Fiber

Hey there! I have created a basic Cube component using react three fibre. import {useState,useRef} from 'react'; import { useFrame } from '@react-three/fiber'; const Box = ({props}) =>{ const ref = useRef() const [hove ...

javascriptreactjsthree.js3dreact-three-fiber

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

jquerycssdrupaldrupal-7flexslider

Converting a busboy file stream into a binary object in Node.js: A step-by-step guide

Seeking assistance with image file upload functionality by integrating Express and Node.js. Currently, I am utilizing the Busboy package to receive binary data in a file format. Specifically, my inquiry revolves around understanding how to capture this bi ...

javascriptnode.jsmongodbbusboy

Hiding both clear buttons in the MUI Autocomplete component on Chromium: A simple guide

The issue with the clear button is specific to Chromium; it does not appear in Firefox. Take a look at an example of a MUI React Autocomplete component displaying two clear buttons. Various solutions mentioned in this thread only hide the rightmost butto ...

javascriptmaterial-uiautocomplete

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com: <span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;"> <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns=" ...

javascripthtmlcssanimationsvg

a user-friendly database solution for storing data in HTML 5 and Google Drive

Greetings, I am currently faced with the following dilemma: As I work on my angular 2 application, I find myself needing to save certain data. Personally, I have a preference for saving data in JSON format. Here is the scenario: Imagine a todo list where ...

javascriptdatabasebrowserangular

The function body.getReader() doesn't seem to be functioning properly on Ubuntu

I am currently in the process of deploying a project on Ubuntu Server 22.04. The tech stack I am using is Next.js + Nest.js. I have come across an issue where my Fetch API behaves differently - on my localhost (macOS) everything works smoothly and I rece ...

javascriptnode.jsubuntunext.jsnest

Is it possible to display a "click" message when a button is hovered over using CSS?

Whenever I hover over a button, I struggle to receive the appropriate message like "click" or "enter" before actually clicking it. How can I use CSS to style my buttons in a way that allows for this pre-click messaging? I have tried approaches such as .bu ...

htmlcssbutton

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

javascriptjqueryhtml

Does the resolve function within a Promise executor support async operations?

I'm trying to wrap my head around the following code: function myPromiseFunc() { return new Promise((resolve) => { resolve(Promise.resolve(123)); }); } We all know that the Promise.resolve method immediately resolves a Promise with a plain ...

javascriptnode.jspromise

Issue: The hydration process has failed due to a discrepancy between the initial UI and the server-rendered content when utilizing the Link element

Exploring Next.js, I stumbled upon the <Link/> component for page navigation. However, as I utilize the react-bootstrap library for my navbar, it offers a similar functionality with Nav.Link. Should I stick to using just Link or switch to Nav.Link? ...

javascriptreactjsnext.jsreact-bootstrap

Using dynamic variables in the $.getJSON function

This specific inquiry represents my current goal, with an added layer of complexity. My aim is to streamline the process by creating a single 'fetchData' function in my VueJS project that can retrieve multiple JSON files without duplicating code ...

jqueryvue.js

Issue encountered when implementing promise and await within a Vue method

I've implemented a function in the mounted() hook to fetch files from my Dropbox account using a promise. Once the promise is resolved successfully, I iterate through all the files and execute another promise function to retrieve additional informatio ...

javascriptvue.jsvuejs2

Error message: "Unexpected token" encountered while using the three.js GLTFLoader() function

I have a requirement to load a .glb model into three.js by using the GLTFLoader. I was able to successfully create a rotating 3D mesh on a canvas without encountering any errors in the console. However, when I tried to replace it with the .glb model, I enc ...

javascripthtmljsonthree.js

Adjust website content depending on user's authentication status

My goal is to display a logout button when the user is logged in and a login button if they are not. I am using JSON tokens to determine if a user is logged in or not, by checking if the token is null. However, this approach does not seem to be working. Ca ...

javascriptangulartypescriptionic4

Determine the occurrences of each element in a given array and save them as key-value pairs

Is there a way to efficiently convert an array of elements into an object with key value pairs representing element frequencies? For example, given an array: var array = ['a','a','a','b','b','c&ap ...

javascriptarraysobject

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss