CSS help changing individual main nav item background color

[danielfinn 1]

I would like to change the background colours of individual item menus on mouse hover. For example, item 1 to be yellow, item 2 to be red and so on. I entered this code after using the inspector in safari to find the page item number of nav menu tabs, however, it did not work. Could someone suggest why?

.main_nav ul li#menu-item-9 a:hover {backgroud-color: none;}

[bxbmedia 2]

If that is exactly what you entered for your css then it will not work because you spelled background wrong. I'm also not sure if "none" is a valid value for color. try using:

.main_nav ul li#menu-item-9 a:hover { background-color: transparent; }

[danielfinn 1]

I didn't realize it was spelt wrong - just copied it straight from a post. I entered the code you suggested and changed the transparent to a HEX color, but it did not work. I tried using menu-item-9 a:hover and menu-item-9:hover and neither worked.

[Danny+ 1,327]

Hi, The reason as to why the above code didn't work is that you haven't created a Wordpress menu as far as I can see, you're still using the default page menu. Which is created by Wordpress automatically. Therefore add the below code to your custom CSS:

/* Home Menu Item */
	#menu-nav li.page-item-5:hover { background-color: yellow; }
	
	/* About Menu Item */
	#menu-nav li.page-item-15:hover { background-color: red; }
	
	/* Portfolio Menu Item */
	#menu-nav li.page-item-9:hover { background-color: green; }
	
	/* Contact Menu Item */
	#menu-nav li.page-item-13:hover { background-color: blue; }

However, if you were to create a custom Wordpress Menu (Appearance > Menu) the above code will no longer work. You will need to follow the code provided by @bxbmedia

[danielfinn 1]

Thanks that worked great! The only thing I had to change was the ':hover' attribute. Instead of including '.page-item-5:hover' I had to type 'page-item-5 a:hover' to get it to work correctly. Could you also help me determine a way of changing the background color to white or transparent when on a selected page. For example, the default pagelines color is a light grey and would like this removed.

[catrina 103]

#menu-nav li.current-page-item {background-color: none !important;}

[danielfinn 1]

Thanks for the quick reply. I did try that code but it didn't work for me. I entered:

#menu-nav li.current-page-item {background-color: white !important;}

but nothing happened.

[catrina 103]

#menu-nav li.current_page_item {background-color: white !important;}

[danielfinn 1]

Thanks I have sorted the issue now. I used the following code to style individual menu items

/* ==== MAIN NAV ==== */
	.main_nav {
	font-size: 18px;
	}
	
	.main_nav a {
	color: #252727;
	}
	
	
	/* HOME */
	#menu-nav li.page-item-5 a:hover {
	background-color: #252727;
	color: #ffffff;
	}
	
	/* ABOUT */
	#menu-nav li.page-item-15 a:hover {
	background-color: #efc60c;
	color: #ffffff;
	}

I fi then applied the code you suggested it proceeded to overwrite the code I mentioned above. I had to add an 'a' after .current_page_item' and take away the word '!important'.

#menu-nav li.current_page_item a {background-color: transparent;}

I am not that familiar with CSS, but does the '!important' just ensure that a line of code overwrites?

[danielfinn 1]

Since my last post I have managed to make progress in this area - thought I am still stuck. I was wondering, can you add coloured padding? I have taken your suggestion and added padding to the top of the child items to push them away form the parent. This has worked well, however, it has left a grey line where the padding has been made. I used the following code:

	/* ==== MAIN NAV ==== */
	#menu-nav a {
	    font-size: 18px;
	    color: #252727;
	    background-color: #ffffff;
	}
	
	#menu-nav a:hover {
	    color: #ffffff;
	    background-color: #252727;
	}
	
	#menu-nav li.page-item-1857 .children a:hover {
	    border-left: 5px solid white;
	    border-right: 5px solid white;
	    border-bottom: 5px solid white;
	}
	
	#menu-nav li.page-item-1857 .children {
	    padding-top: 4px;
	}
	

you can see this issue if you hover the mouse over the ABOUT tab in my main nav www.danielfinn.co.uk

[Danny+ 1,327]

Hi,

Can you provide a link to your website please.