CSS Code styling

HTML & CSS
1

G’Day

I have yet another request for a CSS code snippet.

I want to change the border color of the Drop-down menu panel from #fff (white) to #2F2F2F (dark grey).

Wordpress Menu drop-down screenshot

Browser inspect tool screenshot

Screenshot_200
Screenshot_2001692×957 245 KB

Thanks in Advance.

2

I don’t think you have highlighted the right element. We’re looking for border-color and I think it may well be further up the hierarchy. For instance there is a div with a class of menu-wrap further up the chain, I would be looking around there.

I am also interested in the class definition at the bottom .nav. It has a number of variables e.g. --bs-nav-link-padding-x etc.

I’m wondering if further up the chain, there is specific variable. For instance something like
--bs-dropdown-border-color or --bs-nav-border-color

You could then neatly add a layer of your own.

@layer my-edits {
    /* my colours */
    --bs-dark-grey: #2f2f2f;

    /* nav-menu-edits */
    .jybpd-nav-menu {
        /* this won't work, you need to find the correct property */
        --bs-nav-border-color: var(--bs-dark-grey);
    }
}

Or if you are happy with bootstraps gray-dark in the built-in colours, which is #343a40, you could use that instead.

@layer my-edits {
    /* nav-menu-edits */
    .jybpd-nav-menu {
        /* this won't work, you need to find the correct property */
        --bs-nav-border-color: var(--bs-gray-dark);
    }
}

I think this could be a cleaner way to group your edits.

Obviously it is difficult to give you the best advice, not having access to your site to dig around :slight_smile:

3

@rpg

Thanks for your input.

Unfortunately, the code isn’t working. I’ve decided to re-visit the case at a future date.

:slightly_smiling_face:

4

Hi, what I gave you wasn’t a solution, I even said in the comment /* this won’t work … */. It was a guide towards a solution.

I couldn’t give you the exact answer, because the screen shot you uploaded didn’t provide the information e.g. the correct element in the dom with the border-color property on.

I’ve decided to re-visit the case at a future date.

A bit of digging you will find it. Good luck :slight_smile:

1 Like
5

Hi, the fault was on my side for not sharing the correct console element screenshot.

Thanks for your help all the same.

I am very appreciative.

Rgds

1 Like