WordPress.com

1. writingkraft
   Member
   Apr 23, 2012, 11:20 PM

   Hi,
   I'm very new to wordpress and slowly learning the CSS upgrade. I've been trying to set up the hover state for the menu. The text hovers but not the block. The CSS got pretty messy b/c I was trying all the options that I thought would work. Can someone help me with this? Thanks in advance. Also, after playing around with the menu. I now have a big space in between content and header/menu. I thought I fixed it. But now it's back. Thanks!

   The blog I need help with is writingkraft.wordpress.com.

2. designsimply
   Staff
   Apr 25, 2012, 12:49 AM

   Welcome!

   Here is an example of how to use CSS to adjust the color and background color for menu links in the Imbalance 2 top navigation for the menu item itself as well as the menu items in hover state:

   .menu ul li a {
   	color: #fff;
   	background-color: #53175B;
   }
   
   .menu ul li a:hover {
   	color: #ccc;
   	background-color: #7E478F;
   }

   Adjust the color codes as necessary.

3. writingkraft
   Member
   Apr 25, 2012, 3:53 AM

   Thanks so much for replying and helping me! You helped me correct it, yet I'm still having a problem. Notice the color of the text in the Home state of the menu is too dark, same goes with Bio and Contact when you click to view that page. I can't seem to find where that dark-colored/black text is coming from. What am I missing or not doing?

4. designsimply
   Staff
   Apr 25, 2012, 1:26 PM

   Notice the color of the text in the Home state of the menu is too dark, same goes with Bio and Contact when you click to view that page.

   That is the font color for the active page or current menu item. I found the rules for them by right-clicking the current page menu item in my Chrome browser and selecting the "Inspect Element" option. That opens up a web inspector that shows the HTML code for the element I clicked on an all of the CSS rules that apply to it. Browser tools like that come in really handy, so I would recommend checking them out! Firefox has an add-on that does the same thing and works really well, it's called Firebug.

   Once you see the rules for what is making the current menu item font dark purple, you can copy just those and change the color to light purple by adding this to your Appearance → Custom Design → CSS page:

   .menu ul .current_page_item > a,
   .menu ul .current_page_ancestor > a,
   .menu ul .current-menu-item > a,
   .menu ul .current-menu-ancestor > a {
   	color: #A186A4;
   }

   If you don't want to indicate what the current page is, you can change the color to white, or #fff, to match the other menu items.

Topic Closed

This topic has been closed to new replies.