Customize the color in the dropdown menu

My question too. I don’t see anywhere to control this in the free version of Virtue 2.4.1.

Hey, you can use this to change the background and border colors of the dropdown:

.sf-menu ul {
background: #333;
border-bottom: 0;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
}

Just paste it in your custom css box in theme options > advanced settings.

What kind of lines do you mean?

Hannah

thanks Hannah for the fast response.
What lines do i mean.
For example between the topbar and the primary menu i want to have a line that will separate the 2 areas. Different color from the background, so it can not be just a space between them.
Thank you.

Hmm, still not sure I know what you mean. You just want two lines going through your header? You can try this css but I don’t think it’s what you mean:

#nav-main ul.sf-menu a {
border-top: 1px solid #5ECC4F;
border-bottom: 1px solid #5ECC4F;
}

Hannah

Is there a way to make that background color not a color, but just transparent?
~ Steve

Steve, I assume you mean the dropdown? Just type the word transparent:

.sf-menu ul {
background: transparent;
}

Hannah

Yes, Hannah, that is what I meant. But

.sf-menu ul {
background: transparent;
}

really just turns it to white. https://kugelqualityfireplaces.com/

Is there a way to reduce the opacity?

Many thanks! ~ Steve

Setting it to transparent would just make it see-through and you wouldn’t really be able to see the menu. You can change the opacity with this:

.sf-menu ul {
opacity: .9;
}

Dear Hannah,

Great! That handles my questions! I hope lath also got all her questions answered!

Many thanks! ~ Steve

Dear Hannah although the code was helpful, was not want I wanted.
I will try to explain again. if you check at my website, at the moment the topbar is and the secondary menu areas are blue. The primary menu area is transparent / white. What I want, IF its possible, to separate the areas ( not the buttons only) by a line. This mean that next to the blue (general) area, will be a line from the left side to the right. Again IF ITS POSSIBLE.
Thank you very much, and glad I could help stevelittler.

iath, try adding this:

.topclass {
border-bottom: solid 3px #000;
}
.navclass {
border-top: solid 3px #000;
}

Hannah

yes perfect
THANK YOU HANNAH

Great post. I am having fun experimenting with the drop down menu.
What if you want no lines between the menu items; like just white and no separation?

Hi Benils,
You could use this:

.sf-menu ul li {
border-bottom: 0;
}

Hannah

Great! Thanks a million Hanna

Still have a more sophisticated question like: how can I make the drop down menu (Header menu) with more white space and inset an image? Css coding? I am so excited to know if you have a solution on this?
Site: https://www.tweeninstyle.com/
Thanks