Update the color of the menu ID

Feeling frustrated trying to figure out how to modify this

<nav class="mainnav ">
<a id="top"/>
<div class="navwrap">
<ul id="menu-top" class="menu">
<li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom current-menu- item current_page_item menu-item-home menu-item-70">
<li id="menu-item-1603" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-1603">

I am looking to make it so the color is consistently orange to emphasize the contact menu tab, which is menu item 70

csswordpress

Answer №1

In the scenario where no background styles are applied to the anchor tag, this code will add a background color to the menu item 71.

.menu-item-71 {
background:#ff9900 !important;
}

Answer №2

To implement this, simply add the following code to your CSS file:

ul#menu-top.menu li#menu-item-70{
   background-color: #FFA62F;
}

If you need more color options, check out this palette:

You can also apply inline styling like @Mastama suggests:

<li id="menu-item-70" style="background-color:#FFA62F" class="menu-item menu-item-type-custom menu-item-object-custom current-menu- item current_page_item menu-item-home menu-item-70">

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

Tips for hiding the frame of a React MUI Select component

I am having trouble figuring out how to remove the border around the <Select> component from the React Material UI library. In the image below, you can see that when the <Select> component is not selected, it has a black border/frame. https:// ...

cssreactjsreact-nativematerial-ui

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

My project looks great when I run it locally on my computer and open the page in Internet Explorer 11: https://i.stack.imgur.com/yZvo2.png However, when I deploy the page to an IIS server and navigate to the page, it appears differently in Internet Explo ...

htmlcssasp.net-mvcinternet-explorer-11

There seems to be an issue with Ajax functionality within the WordPress admin

As a beginner level WordPress developer, I am currently halfway through creating a newsletter plugin administration panel. Unfortunately, the jQuery.post ajax I am using for form submission in this admin panel is not working. Strangely enough, the same Wor ...

phpjqueryajaxwordpress

Enhancing url click functionality by incorporating extra input using jQuery

I am currently working on a UI form that includes an option for the user to add additional file upload input fields by clicking a link. This feature is particularly useful for users who need to upload more than the standard 3 initial options. There are a ...

jquerywordpress

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!

I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...

htmlcss

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

javascriptjqueryhtmlcssangularjs

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

phpcsscodeigniterfirefoxhttp-status-code-403

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

javascriptjqueryhtmlcss

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

mobile-exclusive wordpress text area problem

There seems to be a padding issue that is only affecting mobile devices. https://i.stack.imgur.com/2Tbuc.png The cause of this problem has been somewhat identified, but the solution isn't clear without impacting the preview on computers. Here is th ...

phphtmlcsswordpressmobile

WordPress Code: Retrieving post status is causing significant delays

With an array containing around 20,000 entries, each with a unique PostID, I need to loop through these posts and verify if they are published or exist. Using get_post_status for the whole process takes about 15 seconds. Without it, the processing time r ...

phpwordpress

Filling out the form will automatically direct you to the text input section

I'm trying to figure out if I can create an input box in HTML that directs the user to a specific HTML file based on the word they enter. For example, if they type "Doctor", it would redirect them to the page doctor.html. This is for a school project ...

javascripthtmlcssformsinput

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Sliding a div out from the right using jQuery

I am attempting to create a sliding effect from the right on a div using jQuery. I have managed to accomplish part of it, but not exactly as I would like. You can view my code on this JSFiddle. While the div slides out smoothly, the text inside wraps when ...

jquerycss

Tips for accessing CSS properties on the img tag

I could use some assistance with CSS. I am in the process of creating a tree structure using many <ul> and <li> tags. The issue arises when I have multiple <li> elements with a specific class, each containing an <img> tag. How can ...

javascripthtmlcss

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

javascripthtmlcssreactjs

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

cssbrowsercross-browserzooming

Placing a small image on top of multiple images using CSS

I am facing a CSS issue and I need help with positioning a small image (using position absolute) like a warranty badge on top of larger images. The challenge is to ensure that the badge is fixed at the bottom left corner of each image, despite variations ...

javascriptcss

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

phpjqueryhtmlcssforms

CSS page header not appearing on all pages when printing from TryitEditor in Safari on iOS

Experimenting in W3's TryitEditor, I am currently using the following CSS: p.hr { position: running(header) } @media print { .pagebreak { page-break-before: always; } @page { @top-center { content: element(header); } } } Ther ...

htmlcssiossafari