Unable to modify the font color to white on the CSS navigation bar

I've been attempting to alter the color of the text in my .blou class to white within my navigation menu in WordPress, but for some reason, the color isn't changing. This issue is occurring with the WordPress theme I am using.

 .nav-menu ul li a {
    color: #222;
    padding: 10px 15px;
    font-size: 15px;
    display: block;
    font-weight: 600;
}
.nav-menu ul li a:hover {
   background-color: #000F3A;
    color:white;
 
}

After that, I added this:

.nav-menu ul li.blou1 {
   background-color: #000F3A;
    color:white!important;
 
}

The background changes as expected, but the text color remains unchanged. Any assistance would be greatly appreciated.

My Menu Contains:

Home|Gallery|Contact|About|Members|Login(.blou1 class)|Register(.blou1 class)

Additionally, when hovering over the blou1 class, I would like the background to revert and the text color to change to black or another color.

csswordpress

Answer №1

Replace the existing code snippet with the following one for better functionality:

.newCode {
    background-color: #000F3A;
    color:white!important;
}

.newCode:hover {
    color:black;
}

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

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

javascriptcssvue.js

Designate a Cookie for individual users

Currently, I am in the process of building a straightforward Wordpress website that aims to monitor a user's order using a specific Cookie. Although most of the functionalities are already implemented, an unexpected issue has surfaced. Upon logging i ...

javascriptjquerywordpresscookies

Is it possible to adjust CSS values in a relative manner?

#bar{font-size:14px;} The font size of #bar is set to 14px. #foobar{font-size:$-2px} // Fictional code The font size of #foobar is now 12px. (calculated as 14px - 2px) Is there a way to dynamically alter the value of a selector like this? ...

htmlcss

Exploring Media Queries Using Chrome Dev Tools

After an extensive search, it seems that the issue may lie in the fact that what I am seeking does not actually exist. When updating websites, I find myself constantly tracking down media queries. Is there a method to display all media queries for a speci ...

htmlcssgoogle-chromegoogle-chrome-devtools

Listing items in a table using ng-repeat

I'm currently working on constructing a table using ng-repeat, but I also need to incorporate a toolbar. The table design I have in mind is similar to the one shown in the image below, however, I require additional rows to be inserted under the sectio ...

htmlcssangularjsangularjs-ng-repeattabular

Using Vue.js to update the v-bind:style when the mouse hovers over the element

I am working with a span element that displays different background images based on certain conditions. Here is the HTML: <span v-if="type" :style="styles" > </span> In the computed properties section: ...

javascripthtmlcssvue.js

Guidelines on effectively incorporating checkboxes into your WordPress theme using wpalchemy

I have implemented the following code to generate a checkbox on WordPress pages (within the admin section): <?php while($mb->have_fields_and_multi('sidebar-block')): ?> <?php $mb->the_group_open(); ?> <!-- Additional co ...

phpwordpress

How can I adjust or eliminate the offset in Bootstrap 3 for smaller devices like tablets and smartphones?

Within the structure of my web app view (created in Rails 5), this is the main div: <nav class="navbar navbar-inverse navbar-fixed-top" > my navigation bar </nav> <div class="col-md-6 col-md-offset-3"> the central content of my web ...

htmlcsstwitter-bootstrap-3responsive-design

Getting elements in order with bootstrap

Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...

htmlcssangularjstwitter-bootstrap

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

cssreactjsreact-nativestyled-components

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-han ...

htmlcss

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

When two dynamically sized divs are contained within a parent div with a maximum height, the second div should be positioned at the bottom

My outer div has a maximum height of 800px. Depending on the results of a MySQL query, there could be one or two inner divs nested within the outer div. The second inner div must always be fixed to the bottom of its parent. I know how to achieve this usin ...

javascriptphpcss

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

htmlcss

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

htmlcss

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

javascriptcssswitch-statement

Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spa ...

csshtmldreamweavernav

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss