dropdown menu color

Under Appearance > Theme Options > Design you can change the menu color and the hover color. Under Appearance > Theme Options > Typography you can change the “Navigation links” and “Navigation links hover” text colors. This should do what you want.

Cheers!

Hi, yes, that’s how I changed the menu colors and links, but the problem / question I have is about the drop downs.. those don’t change with the main menu items. I’m referring to the submenus. SInce I want a dark grey on a light background, the black submenu/dropdown menus being black are a problem and they don’t change along with the main ones.

Paste the following into your custom css the “color” attribute changes the font color. The “background-color” attribute changes the…well you can figure that one out :).

#access li li a {
color: blue;
background-color: #7FFF00;
}

Here is a link to some color names/hex values that may be helpful to you. Both attributes can use either names or hex values.

https://www.w3schools.com/cssref/css_colornames.asp

Cheers!

Hi imcarmel,

I wrote a step-by-step tutorial how to change the menu including the submenu. Have a look here:

https://www.mouseclick.com/tutorials-2/adjust-the-navigation-bar/

Maybe it will be helpful for you.

Thanks both of you. But I’m still not communicating my question quite right– I wish I could send a screenshot.

Let me try again.

The main navigation is the right color, the fonts are all right, the hover over the submenu is right, but when I hover over the main menu item and the submenu appears below it it’s just a black box, since the background is black and the font is dark grey. The main menu is still white, but the submenus are unreadable until I hover over them.

Also, if I make these css changes, is that something that will be lost if/when the theme is updated?

And I found the Portfolio tutorial on Mouseclick too ?? that was going to be my next question but it needs it’s own subject line ….marie

You can post a link to a screenshot.

Sure

https://docs.google.com/file/d/0BxMNkm6HY0A1SWJTWWl2cm5Fejg/edit?usp=sharing

The custom CSS will not be lost when the theme is updated. It is something that overides the CSS code from the theme so that you can edit the site and make it what you want. You should be able to download the css editor straight from your dash board, when you do it will be under “Appearance” then “Edit CSS.” This will allow you to type your own CSS. You can use Alexander’s tutorial to help you change the colors/fonts/hover effects as needed. Just paste the code from the tutorial into your CSS sheet and change it as you need to. The code I provided will change what you need but you will need more for the hover effect. All of this is covered it Alexander’s tutorials which I have used myself.

Cheers!

OK, i’ll give it another try.. I read through it, but didn’t see anything about specifically changing the problem I’m having.. I posted a link to a screenshot… but I try it again.
marie

Is this what you want (notice the blue and the green)?

https://docs.google.com/document/d/1swYazr34DQVUVchB1c2EogiRNzS7jmrpV3u0YzwRam4/edit

Paul, Snaggy is a great tool for pasting and sharing images. It just may be easier than Google docs.

imcarmel,

try to add this to your css:

#access li li a {
background: rgb(230, 35, 35);
}

which should gives it a nice red. But that you can change easy.

Actually, yes ?? and it works.
Now there’s a black line between menu items that needs to be a softer grey.

Thank you SO much. This is really helpful.

marie

This is how to change that black line. The first attribute changes is the color of the line in this case #111 is very black. Then “1px” is the thickness of the border. then “solid” is the style” I would suggest changing just the color to match what you want.

#access li li a {
border-bottom: #111 1px solid;
}

Cheers!

hmm, i changed it to almost white and it’s still black. Ideally I’d like the whole box/ line bit to go away and just have the words.

Thanks again.
m