Changing the link color in the WordPress header: A step-by-step guide

I have customized my menu at the top and I want the "Contact Us" link to appear in white. Here is what I have added so far:

.cta-button {
    border: 2px solid red;
    border-radius: 15px;
    padding: 5px;
    background-color: red;
    top: -6px;
    color: #ffffff !important;
    transition: all .3s 0s;
}

.cta-button a:link, a:visited, a:active {
    padding: 0px !important;
    color: #ffffff !important;
    
}

You can view it live here:

Despite adding "!important", the link remains black as it is inheriting styles from the header module rather than this specific code for that particular link.

Thank you

htmlcsswordpresshyperlink

Answer №1

There are two main concerns that need to be addressed:

  1. The issue lies in the fact that the color of the link is not properly set at the <li> level where you have applied the class, but rather it should be set at the <a> level. To rectify this, you should adjust the color property within the selector .cta-button > a

  2. Moreover, the default color is currently being forcefully set using !important, which is considered bad practice. Therefore, you will also need to use !important and ensure that your specificity matches the existing style. The recommended approach is to replicate the selector from the template and append your custom class, as illustrated below:

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
    color: white !important;
}

Additionally, remember to apply the same adjustments for :active, :visited, and other relevant states.

Answer №2

Here is a suggestion for adding color:

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
   color: #fff !important;
}

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:active,
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:visited{
   color: #fff !important;
}

I noticed that the link color on the website already has the !important tag specified. When multiple !important css properties are applied to the same element, it's important to consider specificity. You can learn more about CSS specificity here.

It's worth noting that using excessive !important declarations to override CSS properties is generally considered a bad practice.

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

What is the correct way to customize colors for specific components in Material-ui?

Struggling with theming in Material-UI, particularly when it comes to customizing element colors. Some elements default to 'theme.palette.main.dark' and I want to override this behavior. For example, the TextField and SpeedDial components automa ...

javascriptcssreactjsmaterial-ui

What causes my divs to change position when using text <h1>?

When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two o ...

htmlcsstextpositioning

Utilizing a CSS file within a YAML configuration in R Quarto

Is there a way to reference a css file from a yaml file in my R Quarto Book? The css file defines the theme for my Quarto document, and I want all our Quarto docs to have the same appearance. When I directly call the css file, I can customize aspects like ...

cssryamlquarto

Internet Explorer 8 is causing alignment problems with sidebars on certain websites within a Wordpress multisite setup

I am managing a Wordpress multisite setup with the following websites: The main portal: which connects to The issue arises on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Attached is a screenshot of the homepage of gprgebouw. ...

csswordpressinternet-explorer-8alignment

Internet Explorer 8 does not show the "Save Target as..." option for block elements

When using Internet Explorer and right-clicking on an anchor tag, the usual options include: "Open in New Tab" "Open in New Window" "Save Target as.." However, in IE8, if the anchor tag's content is a div or span with the "display:block" CSS pro ...

htmlcssinternet-explorer-8

Personalized HTML Input Field for Digital Keyboard Scores

As a new JavaScript beginner, I have experimented with various approaches in an attempt to create a website that features a digital piano experience without the actual instrument. My goal is to develop a platform where pressing multiple keys together will ...

javascripthtmlcss

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

javascriptjqueryhtmlcss

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

htmlcss

Using simpleXML to extract HTML code from an XML document

Presented below is content extracted from an xml file: <Cell> <Comment ss:Author="Mark Baker"> <ss:Data xmlns="http://www.w3.org/TR/REC-html40"><B><Font html:Face="Tahoma" html:Size="8" html:Color="#000000">Mark B ...

phphtmlxmlsimplexml

Missing value: Attempted to access properties of an undefined variable

I've been encountering an issue while trying to transfer data from one component to another using a service. The error message that I keep running into is: ERROR TypeError: Cannot read properties of undefined (reading 'statistics') at St ...

htmlangulartypescriptbootstrap-5

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

htmlcssseleniumui-automation

Modify the HTML input type color in React.js only after releasing the mouse button

<input className="color-palatte" type="color" onChange={(e) => onColorChange(e)} /> When interacting with the color palette, I have set up an API call to trigger only when I release the slider instead of continuous calls while sliding over the co ...

htmlreactjseventsinputcolors

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Converting HTML to PDF with CSS using Android Itext is only functional when applied directly to SVG elements

Hey there! I'm currently using the itext library (html2pdf) to convert my HTML into a PDF. Everything seems to be working fine, except for the SVG styles. Specifically, this is the part of my HTML code that's causing issues: <style> .my ...

androidcssitexthtml2pdf

How many hyperlinks are there on this webpage?

Is there a way to determine the number of links on a web page without counting social media networks like Google, LinkedIn, Facebook, and Twitter? ...

phphtmldom

Tips for ensuring a footer remains fixed at the bottom of a webpage, despite any increase in content

As I work on my single-page application, I'm playing around with a shared footer layout. My goal is to keep this footer at the bottom of the page at all times. However, I also want to explore the possibility of hiding it in certain routes, even though ...

cssangularscss-mixins

Tips for clear a single input tag in a form using only html5

After attempting the example below, my goal is to achieve the functionality where pressing the reset button will only reset the field in the current line. Is this achievable using only HTML5 without jQuery/JavaScript? Any suggestions or ideas are welcome ...

htmlinputresetform-fieldsformfield

Preventing Button Shifting in CSS: A Guide

I have a website at antetech.org where I am using bttn.css for the navigation buttons. The issue I am facing is that when I hover over a button, the letter-spacing doubles, causing all the buttons to the left to shift over. Is there a way to maintain the l ...

htmlcss

Ensure that hyperlinks remain unbroken and do not split over two lines

When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...

phpcss

Hey there! I'm experiencing an issue with the jquery function $(this).childen().val()

Here is my HTML and JS/jQuery code: (function($) { $('.list-group li').click(function(){ console.log("push li"); console.log($(this).attr('class')); console.log($(this).children('.hidden_input&ap ...

javascripthtmljquery