Drop Down Menu changed the text color and font

Sparkling
1

Hi,
On the site below :

I created a drop down menu for “Romanian Folklore ”
But the background changed to red (when hover) and lila . I want it to be black as the primary menu.
I also want all the menus to be in the higher part of the header.
I want that all the menus to have the same color (normal and at hover).
Right now I use this extra code for the colors :
#page .entry-title a:hover {
color: #855aa5;
}

/Heading color/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #855aa5;
}
Thanks,
Adriana

2

Hey there,
I hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

/*Change active and hover color*/
.dropdown-menu>.active>a {
    background-color: #000 !important;
    color: #855aa5 !important;
}
.dropdown-menu a:hover{
   background-color: #000 !important;
    color: #855aa5 !important;
}

/*menu shift*/
.nav>li>a{
  padding-right:10px;
  padding-top:70px;
}

In addition to the menu shift, I recommend that you make your logo smaller, you can then adjust the padding-top to adjust the height.

Best Regards,
Support

3

Hi,

I added:
/Change active and hover color/
.dropdown-menu>.active>a {
background-color: #000 !important;
color: #855aa5 !important;
}
.dropdown-menu a:hover{
background-color: #000 !important;
color: #855aa5 !important;
}

But the background color is lila 855aa5 and the text black.
I want the background to be exactly as the color of the background of the header and the text white and only at hover to be this color : 855aa5 . So same patter as the header.
I resolved the issue with the menu which was down by making the logo smaller.

Thanks,
Adriana

4

Please try using following custom CSS code.

ul.dropdown-menu {
    background-color: #3A3A3A;
}

.dropdown-menu > li > a {
    color: #fff;
}

#page .dropdown-menu a:hover {
    background-color: transparent !important;
    color: #855aa5 !important;
}
5

Thanks ,
Right now the background is black, but if selecting several times the subitems (from the drop down menu), the background becomes red .
I would like the background to be always black.
And also, the color of the subitems text is a kind of grey. I would like all menu text including the drop down menu to be all white.
Thanks and really appreaciating!
Adriana
PS:
Pls see al the CSS I have until now so that not to overlapp :
/Heading color/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #855aa5;
}
/Change active and hover color/ ul.dropdown-menu {

background-color: #3A3A3A;
}

.dropdown-menu > li > a {

color: #fff;
}

#page .dropdown-menu a:hover {

background-color: transparent !important;
color: #855aa5 !important;
}

6

I visited your shared site but don’t see the shared custom CSS code used on it so i can’t troubleshoot the color issue.

Could you please tell me where you have added the shared custom CSS code?

7

Hi Movin,
I added the CSS to my child theme so that you can see it on my site http://kiarayew.com/
You can have a look now :slight_smile:
Regards,
Adriana

8

Use below custom CSS code to achieve it.

.navbar-default .navbar-nav li a {
    color: #fff;
}

.dropdown-menu>.active>a{
    background-color: transparent;
}
9

Thanks Movin!

It is working much better now on PC.
But on iphone (smart phones) the background still becomes red :(.
Is there any way we can do this for both platforms?

Regards,
Adriana

10

Use below custom CSS code to make it work on both platforms.

#page .dropdown-menu>.active>a{
    background-color: transparent;
}
11

Thanks Movin,

So, now I should use both the code you gave me earlier and the last one you gave me? :
.navbar-default .navbar-nav li a {
color: #fff;
}

.dropdown-menu>.active>a{
background-color: transparent;
}
#page .dropdown-menu>.active>a{
background-color: transparent;
}
Or just the last piece of code you gave me?
Thanks,
Adriana

12

Instead of your shared code you should use following CSS code.

.navbar-default .navbar-nav li a {
    color: #fff;
}

#page .dropdown-menu>.active>a{
background-color: transparent;
}