Adjust the color of a linked tab with a dropdown list on WordPress navigation menu using CSS

Question

Adjust the color of a linked tab with a dropdown list on WordPress navigation menu using CSS

I'm currently working on a WordPress website utilizing the Twenty-Twelve theme. One of the main menu tabs is labeled 'Sales Items'.

When hovering over this tab, it displays various categories of sales items in a dropdown list. However, I am struggling to change the color of the 'Sales Items' tab itself without affecting the colors of the links in the dropdown list.

Every attempt to target only the Sales Items menu tab in CSS ends up changing the color of all the dropdown list category items as well.

If anyone knows the correct CSS code to achieve this, your help would be greatly appreciated!

You can find my website at

Thanks in advance for any assistance!

css wordpress menu parent-child nav

Answer 1

Answer №1

One way to style sales items is by adding a specific class to the tag in the HTML code. This will require editing the HTML, resulting in code like this:

<a class="targetsale" href="http://www.thecolourmarket.com/product-category/clothing/sale-items/">Sale Items</a>

You can then apply CSS styles to this specific class.

If you are unable to modify the HTML directly, another approach is to target the sale item itself and then its sub items. For example:

li#menu-item-579 a{color:red;}   //styles sale items
li#menu-item-580 a{color:black;}  //styles coats & jackets

Answer 2

One way to style sales items is by adding a specific class to the tag in the HTML code. This will require editing the HTML, resulting in code like this:

<a class="targetsale" href="http://www.thecolourmarket.com/product-category/clothing/sale-items/">Sale Items</a>

You can then apply CSS styles to this specific class.

If you are unable to modify the HTML directly, another approach is to target the sale item itself and then its sub items. For example:

li#menu-item-579 a{color:red;}   //styles sale items
li#menu-item-580 a{color:black;}  //styles coats & jackets

Answer 3

Answer №2

To customize the "sales items" tab specifically, you can utilize the ID #menu-item-579 or the class .menu-item-579 in your CSS file. For this example, I will be using the ID.

If you wish to modify the text color, you can include the following:

#menu-item-579 a {
    color: #5bad13;
}

To change the background color, you can use:

#menu-item-579 {
    background-color: #5bad13;
}

When adjusting the background color, you may notice that there is no padding on the left and right sides. Therefore, you might want to add some padding as well.

#menu-item-579 {
    background-color: #5bad13;
    padding: 0 13px;
}

However, after adding the padding, you may realize that the submenu is not correctly positioned. In this case, you will need the ID or class for that particular submenu. It may be challenging as the submenu does not have a unique class, but you can use the main menu's unique class/id instead.

#menu-item-579 .sub-menu {
    margin-left: -13px;
}

I hope this aligns with what you had envisioned. Good luck!

Answer 4

To customize the "sales items" tab specifically, you can utilize the ID #menu-item-579 or the class .menu-item-579 in your CSS file. For this example, I will be using the ID.

If you wish to modify the text color, you can include the following:

#menu-item-579 a {
    color: #5bad13;
}

To change the background color, you can use:

#menu-item-579 {
    background-color: #5bad13;
}

When adjusting the background color, you may notice that there is no padding on the left and right sides. Therefore, you might want to add some padding as well.

#menu-item-579 {
    background-color: #5bad13;
    padding: 0 13px;
}

However, after adding the padding, you may realize that the submenu is not correctly positioned. In this case, you will need the ID or class for that particular submenu. It may be challenging as the submenu does not have a unique class, but you can use the main menu's unique class/id instead.

#menu-item-579 .sub-menu {
    margin-left: -13px;
}

I hope this aligns with what you had envisioned. Good luck!

Adjust the color of a linked tab with a dropdown list on WordPress navigation menu using CSS

Answer №1

Answer №2

Similar questions

CSS Dropping Down Menu Design

"Enhance your browsing experience with Chrome by automatically changing the background when

What is preventing Kohana from reading my CSS?

Keep the table header in place while scrolling

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

Can someone explain why my button icons are not aligning to the center properly?

Is it possible to smoothly switch between two states using just a single animation class?

What is the process for adjusting the color of a mat-divider?

A different approach to achieving a newspaper-like text justification in HTML

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

Tips for integrating scroll-snap and jQuery's .scroll() function together

Verify whether the content within the Div has been modified

Effortlessly switch between multiple divs with jQuery

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

Fading CSS Hover Popup Display and Hide

Steps to customize a CSS file within node_modules

Tailoring Width with css

Reiterating the text and determining the length of the string

The conditional CSS appears to be malfunctioning

Remove information from WooCommerce rest API (both all orders and individual order) endpoint