I custom-designed a button for the WordPress header, but I'm having trouble adjusting the text color on the button using custom CSS

I have selected the Ocean WP theme to construct my website and I am utilizing the WP job manager plugin. In the header, there is a menu option labeled "post a job" that I wish to convert into a button.

After researching online, I successfully transformed it into a button by following these steps: http://prntscr.com/pi6zec

To achieve this, I made adjustments in the custom CSS section as shown here: http://prntscr.com/pi70vb

Although I managed to make the text green, I now want to change its color to white for better visibility next to the green background. Does anyone know how I can accomplish this? I attempted using:

text-emphasis-color

and

text-decoration-color

However, these methods did not produce any visible changes. Can someone provide guidance on how to alter the color of the text?

In addition, the current behavior is such that when I hover over the button, the text turns black and the background becomes white. However, the clickable area only appears to be active if I hover directly over the text. Is there a way to modify this behavior so that clicking is allowed anywhere within the button area using CSS?

Answer №1

The styling is typically applied to the a hyperlink, which is nested within #menu-item-840. Essentially, you are adding styles to the container that are being overridden by pre-existing styles on the content. This is why your padding is not clickable; you have created space around the container, not the link itself.

Instead of targeting just #menu-item-840, try targeting #menu-item-840 a instead. You can then consolidate #menu-item-840:hover and #menu-item-840:hover a into a single selector like #menu-item-840 a:hover.

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

Top and bottom borders embraced by text: the ultimate header design

I'm looking to create a screen-wide headline with a simple text-logo. The challenge is to make it touch the container's top and bottom borders like this example, including its half-height variations. Upon inspecting the HTML, I noticed that ther ...

issues with rounded corners not functioning properly within frameset

I'm trying to display rounded corners in IE frameset, is there a way to do this? Check out the example below: index.html: <html> <head><title></title></head> <frameset rows="*,64" style="margin:0; padding: 0;" frame ...

Incorporating a touch of dark opacity into an image

Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg The background image I used is this one: https://i.sstatic.net/dIhLt.png I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdi ...

Activate function when list item is clicked

My goal is to execute a function when users click on the li elements in the snippet below without relying solely on onclick. For instance, clicking on the first li element (with a value of 1) should trigger a function where the value "1" is passed as an ar ...

The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/) <table class="body"> <tr> ...

Mini-navigation bar scrolling

I am trying to create a menu where I want to hide elements if the length of either class a or class b is larger than the entire container. I want to achieve a similar effect to what Facebook has. How can I make this happen? I have thought about one approac ...

Tips for reducing the impact on performance caused by cookie consent code

Experimenting with basic HTML to analyze the impact of cookie consent code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="determine page l ...

All images must be arranged to fit seamlessly side by side regardless of the screen size

I'm currently experimenting with creating a website dedicated to my favorite TV shows. Upon entering the site, you are greeted with the main page that includes 7 images. Each image is linked to a specific webpage providing information about the corre ...

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

Animation unveiling of text slides

I have been working on designing a unique button for my personal diet app project that involves a sliding text effect when the mouse hovers over it. I'm almost there, but I've encountered a major issue that seems impossible to solve. I want the s ...

Deactivate toggle effect by clicking on a different link

My existing JavaScript code changes the background color of a link when it is clicked: $(".button").click(function(){ $(this).css('background-color', '#555'); }); While this functionality works, I am looking to have the color tog ...

Tips for properly positioning the ko validation message in case it is lengthy

I have implemented ko validation messages in order to validate input fields. Can anyone provide guidance on how to align the validation message correctly within the specified location? <input id="personName" class="form-control placeholder has-error" t ...

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

Is it possible to adjust the zoom on my website so that it adapts to the user's higher resolution if my website layout is initially set for 800x600 resolution?

Apologies for the confusion in my previous question. I am not looking to alter the user's browser settings but rather focus on optimizing my website layout for the most common resolution size. Ideally, I want my page to adjust and zoom in if the user& ...

What is the best way to remove table row data fetched from an API within a table?

Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...

Suboptimal placement of second submenu in Navbar

This question is inspired by a discussion on Stack Overflow that you can read here. Everything seems to be working fine, except when the 2nd level item is not at the top. In the example provided, the item with the 2nd level menu is the first item. If you m ...

Add a decorative frame around the heading and text block

I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one? <style type="text/css> h1, p { font-family: consolas; border: 2px solid #73AD21; bor ...

Sass and responsive flex boxes allow for the easy control of image overflow

Duplicate part Looking to create a unique layout for a section within my React application that resembles the image below. Please disregard the lines on the right. https://i.sstatic.net/rfgGy.png Here is the initial HTML structure, with placeholder boxes ...

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...