Site logo

Archived topic

How to target sub-menu in CSS

3 replies · Started by anabella on June 1, 2022

Viewing posts 1–4 of 4

On my website's menu I have:
An item called PRODUCTS > in the submenu, I have 2 categories (COLUMNS) > inside each category I have a few items.

I want to add an icon ONLY to the CATEGORIES (not to the items inside those categories). I managed to add the icon through CSS, but it's applying to everything (all the items in the submenu). I can't find a way of targeting only the CATEGORIES (COLUMNS)

Please see the link provided > The only items that should have the icon are COLUMN 1 and COLUMN2. The sub-items (called "test") shouldn't have an icon.

Thank you in advance.

Hi there

try this CSS:

.main-nav .menu > li > ul > li > a::before {
    content: "";
    width: 25px!important;
    height: 25px!important;
    float: left!important;
    background: url(https://brainstorming.webdesign-project.com/wp-content/uploads/2022/05/frame-28.png)!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
}

Amazing! Thank you so much David

You're welcome

This archived topic is closed to new replies.