Menu styles and colours

Sure thing! Are you using the classic menu? Assuming you are, you could use the following custom CSS to change the background colour:

.navigation-classic .primary-navigation {
    background: #1279be;
}

You can change the value of #1279be to any hex colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of hex colour codes and their corresponding values. Here’s an example of a site that I’ve used before:

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

Similarly, you can use the following to change the background colour of the secondary menu:

.navigation-classic .secondary-navigation {
    background-color: #1279be;
}

Next use the following to change the hover effect for the primary menu:

@media screen and (min-width: 1020px) {
    .navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .navigation-classic .primary-navigation .menu-primary > ul > li > a:focus, .navigation-classic .primary-navigation .menu-primary > ul > li > a:active {
        background: #1279be;
        color: #1279be;
    }
}

The value for background defines the background colour upon hover and color defines the colour of the links upon hover.

For the secondary menu, that would look as follows:

@media screen and (min-width: 1020px) {
    .navigation-classic .secondary-navigation a:hover, .navigation-classic .secondary-navigation a:focus, .navigation-classic .secondary-navigation a:active {
        border-bottom-color: #1279be;
        color: #1279be;
    }
}

border-bottom-color defines the colour of the underline effect upon hover and color defines the colour of the link.

Hope that’s helpful! Let me know if you have extra questions.

Hi Siobhan

The CSS for the primary navigation worked a treat. The border of the background still seems visible when I hover though , not sure if you have a solution for this?

I had limited success with the secondary navigation. The whole width of the area where the secondary navigation is sited changed colour, ideally I only want the menu items to feature a background colour. Also the underline still appears and ideally I want to get rid of this aspect and have the menu behave more like the primary one.

Do you have any ideas how I can achieve this?

I look forward to hearing from you.

Hi again,

The CSS for the primary navigation worked a treat. The border of the background still seems visible when I hover though , not sure if you have a solution for this?

The menu items do have a white box-shadow added to them upon hover. Perhaps this is what you’re referring to? If so, you’ll need the following custom CSS to remove that:

.primary-navigation .menu-primary > ul > li > a:hover, .primary-navigation .menu-primary > ul > li > a:focus, .primary-navigation .menu-primary > ul > li > a:active {
    box-shadow: none;
}

I had limited success with the secondary navigation. The whole width of the area where the secondary navigation is sited changed colour, ideally I only want the menu items to feature a background colour. Also the underline still appears and ideally I want to get rid of this aspect and have the menu behave more like the primary one.

Your options here are to either use the following to change the background colour of a smaller section of the menu:

.navigation-classic .secondary-navigation ul {
    background-color: #1279be;
}

Or to use the following to change the background colour of the individual menu items:

.navigation-classic .secondary-navigation li {
    background-color: #1279be;
}

Finally, you can use the following to remove the underline hover effect in the secondary menu:

.navigation-classic .secondary-navigation a:hover, .navigation-classic .secondary-navigation a:focus, .navigation-classic .secondary-navigation a:active {
    border-bottom: none;
}

Hope that’s helpful!

Hi Siobhan, I tried the css you outlined but I wasn’t able to create the effect I was looking for.

I have made my site live now so I can provide the link but would be grateful if you could delete it after.

1) As you will see the primary menu appears to have a white outline and seems to extend longer that is required. Do you know how I can fix this?

2) I would have liked the secondary menu to be similar in style to the primary ie no underline. I had modest success with the first css you suggested but the whole section width changed colour and I couldn’t confine the colour change to the specific menu area.

3) The menus are very slow to load making the pages appear to jump when the reload. Any suggestions on how I can sort this? I’ve optimised the images but I have no idea what could be the cause?

I look forward to hearing from you

Kind regards

@and70 Hi there – I’m taking over this thread from Siobhan.

I’ll reply to your questions in batches.

1) As you will see the primary menu appears to have a white outline and seems to extend longer that is required. Do you know how I can fix this?

Hmm – I’m not sure seeing what you’re describing. This is how the header area looks to me:

[screenshot removed]

Could you provide a screenshot, pointing out the exact issues you’re referring to? Thanks!

Here’s a guide on how to make a screenshot:
https://en.support.wordpress.com/make-a-screenshot/

You can upload the screenshot – in a graphic format like JPG, PNG, or GIF – in your Media Library, and provide a link so I can see it, or upload it with a service like Imgur or Snaggy.

• This reply was modified 7 years, 4 months ago by Kathryn Presner.

2) I would have liked the secondary menu to be similar in style to the primary ie no underline. I had modest success with the first css you suggested but the whole section width changed colour and I couldn’t confine the colour change to the specific menu area.

When you refer to an “underline” are you referring to the blue line that appears below each menu item on hover?

This CSS that Siobhan gave you earlier should have removed the underline:

.navigation-classic .secondary-navigation a:hover, .navigation-classic .secondary-navigation a:focus, .navigation-classic .secondary-navigation a:active {
    border-bottom: none;
}

All that does is remove the bottom border (underline) on hover, so it shouldn’t affect the colour of anything.

Let me know how it goes.

3) The menus are very slow to load making the pages appear to jump when the reload. Any suggestions on how I can sort this? I’ve optimised the images but I have no idea what could be the cause?

I don’t think there’s much you can do to change that. This theme uses JavaScript to position the menu differently depending on screen size, so there’s a small delay before the elements jump into place.

Hi Kathryn

Thanks for your help on this. As I am working on this for a client and it is still a work in progress, please can you delete the screen shot featured in this thread.

Many thanks

Done.