Drop Down Menu CSS not Working After Publishing

Hello, I am working on our site and I want to make changes to the drop-down menu. I made them using the following CSS, but once published, it no longer works.

/*Change Color of DropDownMenu */

@media (min-width: 767px) {
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
ul.dropdown-menu a {
color: #ffffff;
background-color: #665DB7;
}
ul.dropdown-menu li a:hover {
background: #c5aad1;
color: #882b8e
}

I would like the font-family to be helvetica neue.

The site is not online right now, but I can give you temporary access.

https://summitlighthouse-sf.org

Hi there

I need to see your website somehow, is there any chance to deactivate the coming soon page?

Isn’t there a way I can privately send you temporary login credentials? If there is a way currently, I’m not seeing how. (The site is not ready to be live, especially since it takes so long for you to respond due to time zones.)

By the way, I see in other forum questions that when people give you their credentials they are not private at all. How do I mark a reply private. And if I make a mistake, is their a way to delete it right away?

Hey there

Yes, you can, just send them in my private message, click on my name and you will see message option

Hello, I sent you my information as a private message, but never heard back from you. Were you able to figure out our situation?

By the way, the site is now live online. summitlighthouse-sf.org

I’m wondering if you will respond or is this issue dead?

Hi there

Sorry for the delay, try this css code:

.menu-item-has-children:hover >.dropdown-menu {
display: block !important;
}

Thank you so much for trying. No, the colors of the drop down still remain the same.

Not clearly get, you want to change menu hover colors or submenu is not appearing on hover? which one is your problem? :slight_smile:

Both can be fixed by css code

Hi there,

When a person hovers over “Spiritual Tools,” I want the drop-down menu’s background color to change to #665db7. And when someone hovers on an item in the dropdown menu, I want the colors to change to #c5aad1 for the background, with the text color #882b8e. Sorry, I don’t know how to describe what I want in any other way.

Thanks, that makes sence now :slight_smile:

use this code:

.dropdown-menu {
background-color: #665db7 !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
background: #c5aad1 ;
color: #882b8e;
}

Thank you! That worked when I’m in the customizer, but it doesn’t work after I publish. This was the situation that I started with.

I have a feeling that it might have something to do with the page builder that I’m using, which is WP Bakery. Therefore, I guess I need to forget trying to do this.

Thank you for your time.

hi there

Well, the code is not added at all, can you please add it?

Thank you so much. I had added it to the Additional CSS section. When I added it to Unite Options, it worked. Yay! :slight_smile:

Site is working fine here. Did you still facing the issue ?

That’s nice to hear :slight_smile:

I will mark this case as resolved