Dropdown menu background colour

communicationkinnectionsblog · Member · May 25, 2016 at 6:57 am
Copy link

Add topic to favorites
Dropdown menu background colour to be the same as the menu colour
Thanks so much

The blog I need help with is: (visible only to logged in users)
carladoria · Member · May 25, 2016 at 1:41 pm
Copy link
Hi there,
When you change the drop down menu background color (menu sub-items) then you need to change the color of the font as well to be readable
The following CSS changes the background color, the font color, and the background color when you hover over so that everything matches the same color as the main menu: (paste this code in My Sites>Customize>CSS)
```
@media screen and (min-width: 768px)
.main-navigation ul ul {
    background-color: #316614;

}

@media screen and (min-width: 768px)
.main-navigation ul ul a {
    color: #FFFFFF;
 }

.main-navigation ul ul a:hover {
    background-color: #316614;
}
```
Hope it works!

[Moderator’s note – added code tags]
communicationkinnectionsblog · Member · May 26, 2016 at 12:50 am
Copy link
Thanks alot – I had to remove the @media screen.. line and it worked

there is just one thing when I click on a drop down menu item the main menu wording goes black, I need it to stay white

Also can I hide the wording HOME on the home page above the image slider ?
siobhyb · Member · May 26, 2016 at 10:39 am
Copy link
Hi there,

there is just one thing when I click on a drop down menu item the main menu wording goes black, I need it to stay white

By design, the theme makes the links for your current page a different colour in the menu so that those browsing can easily see where they are. You can change the colour of the links for the current page with the following CSS:
```
.main-navigation li.current_page_item>a, .main-navigation li.current-menu-item>a, .main-navigation li.current_page_ancestor>a, .main-navigation li.current-menu-ancestor>a {
    color: #fff;
}
```
The above snippet will change the links to white (#fff) but you can also change this value with any HEX code of your choice.

If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values.

Here’s an example of a site that I’ve used before:

http://www.color-hex.com/

Also can I hide the wording HOME on the home page above the image slider ?

You can hide the title on your home page with the following snippet:
```
.home .entry-title {
    display: none;
}
```
Hope that’s helpful! :) You know where to find us if extra questions come up.
exodasblog · Member · Jun 1, 2016 at 1:35 am
Copy link
awesome thank you soooo much. This is fantasic support

Just wondering if I can add a link to the footer area on this page to anerleymaydesigns.com.au ?
siobhyb · Member · Jun 1, 2016 at 4:40 pm
Copy link
Hi @exodasblog,

You could add HTML to a text widget and then add it to your theme’s footer area. We have information on creating a link with HTML here:

https://en.support.wordpress.com/beginning-html/#adding-a-link

If you’d then like to reposition the link further down your footer or elsewhere on your page, we could potentially use some CSS.

If you’d like some further help, please start another thread on these forums and detail exactly where you’d like to position your link. We can help from there!
thesmartluxe · Member · Jun 2, 2016 at 8:41 pm
Copy link
Hi there,

I’ve managed to change the background colour and text colour of my dropdown sub menu and I needed to change the background colour to be more transparent so added “opacity: 0.8” as below:

.menu ul.sub-menu, .menu ul.children {
background-color: #82ddea;
opacity: 0.8;
color: white;
}

.sub-menu a {
color: white !important;
}

This has also changed the opacity of my text to 0.8. Can you show me how I can keep my text with opacity 1 and background opacity at 0.8, please?
siobhyb · Member · Jun 3, 2016 at 11:05 am
Copy link
Hi @thesmartluxe,

As you’re using a different theme and have a different question to the original poster, please can you start another thread on these forums? You can start a new thread via the following form:

https://en.forums.wordpress.com/forum/css-customization#postform

It is easier for us to triage and help if questions are kept to different threads, and also minimises the email notifications that the original poster receives.

I’ll be happy to help you once you’ve posted your new thread.
thesmartluxe · Member · Jun 3, 2016 at 9:33 pm
Copy link
Hi @Siobhyb,

Sorry I didn’t realise this thread was for a specific theme!! Sorry to disturb!
siobhyb · Member · Jun 5, 2016 at 9:49 am
Copy link
@thesmartluxe: No worries at all! As soon as you start another thread, we can help with your specific question:

https://en.forums.wordpress.com/forum/css-customization#postform

No items found.