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

Transitioning Between Div Elements Using Jquery

I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...

jqueryhtmlcss

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

javascriptjqueryhtmlcss

The Navbar in Bootstrap 3 remains expanded and does not collapse

It seems like there's a simple solution I'm overlooking. When I resize my screen, the navbar collapse toggle stops working. I've searched various forums but couldn't find a fix that works for me. Could someone lend a hand in identifyin ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

problem with CSS negative margin

When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...

htmlcss

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Is it possible to apply a border radius to the tops of each stack in a stacked responsive bar created from the Nivo library, without affecting the bottom? Currently, the responsive bar's border radius applies to both the top and bottom. Thank you! ...

javascriptcssreactjsnivo-react

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle) body { font-family: Arial; font-size: 13px; } a { text-decoration: none; color: #515151; } a:before { font-family: "Font Awesome 5 Free"; content: "\f07a"; di ...

cssfont-awesomefont-awesome-5

Change the appearance of the page when it is being displayed within an iframe using CSS

How can I display a webpage differently using CSS if it is within an iframe? I would like to use jQuery or JavaScript to switch to a different stylesheet specifically when the site is being displayed within an iframe. Any suggestions on how to achieve th ...

javascriptjqueryhtmlcssiframe

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

htmlcss

Is the float floating within another float?

This question may have a strange title, but I couldn't think of anything better to call it. So, here's the situation: I have a grid layout where I need my .search-wrapper to be 50% wide and floated to the right. In my demonstration on jsfiddle, ...

csscss-float

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

phphtmlcss

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Consider the following div element: ... <div id='section-to-print'>CONT /*Content*/ </div> ... Accompanied by this CSS code snippet: @media print { * { -webkit-transition: none !important; ...

cssprintingpositionduplicatesfixed

How come my keyframes animation isn't functioning properly on my div element?

I am currently designing a custom animation for a checkers game. My goal is to create an effect where the checker piece moves slowly to its next spot on the board. Below is the CSS code I have used: @keyframes animateCheckerPiece { 0% {top: ...

javascriptjqueryhtmlcssdom

When integrating AngularJS $http with WordPress, the desired response may not always be achieved

I recently implemented a wp_localize_script for ajax in my WordPress project: wp_localize_script('cb_admin_js', 'cbAjax', array('ajax_url' => admin_url( 'admin-ajax.php' ))); As part of testing, I used an $http. ...

javascriptangularjswordpress

housing the picture within a CSS grid

I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries? When I attempt to insert the ...

htmlcsscss-grid

The sticky HTML table header feature is functional, however, the header's border disappears while scrolling

Utilizing the react-bootstrap-table2 library in my React project, I added custom CSS to create a sticky top row effect: .table-container { overflow-y: auto; max-height: 500px; } .react-bootstrap-table th { position: sticky; top: -1px; background- ...

htmlcssreactjs

"Enhance your shinydashboard with a customizable header dropdown feature that allows you

I am trying to create a vertical grouped dropdown menu in the header panel that contains multiple links. Currently, I can only achieve a flat horizontal layout using tags$li. I want to place linkA and linkB under grouplinkAB, allowing users to open one o ...

htmlcssrshinyshinydashboard

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

javascriptcssreactjs

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path