Forums » Fixing WordPress » Make the navigation different colours

  • Hi all,

    So I’ve been working on my site and I’d like the menu different colours on hover and them I’d quite like the sub-menus to be different as well…

    For example I’d like ‘About the School’ to be a royal blue on hover and all the sub-menu items to be navy.

    (Please note it’s the whole background I want to change not the font colour)

    I did try myself using classes for each menu item and it went wrong.. only because when I hovered the colour didn’t fill the whole background of each item…

    Thanks for your help in advance 🙂

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Add the following to the Additional CSS panel of the Customizer:

    .main-navigation li:hover,
    .main-navigation li ul li:hover {
    	background-color: royalblue;
    }
    .main-navigation li:hover ul li {
    	background-color: navy;
    }

    Learn how to use your browser’s CSS inspector tool. When you hover over various HTML tags in the tool’s listing, the related area is highlighted on the page along with applicable padding and margins. You can easily find the right tag that covers the area you need, in this case the li tags. You can then add new CSS rules and experiment with selectors and properties until you hit upon the right combination. Then copy the result to the Customizer.

    The changes in the tool do not persist. You can revert all changes you make in the tool by reloading the page.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make the navigation different colours’ is closed to new replies.