Menu color change options are not consistent
-
Hi I am working on a blog (www.kcemployees.com) in the Expound theme and have been using CSS to change colors within the menu and subnavigation. I am coming across some difficulty with a few menu items though that aren’t standalone pages. I cannot get the background color on them to look uniform with the rest of the color scheme.
Specifically on my blog when I hover over the Topic button and select one of the items below it, when any of those pages open the Topic button is purple and not orange. It’s not a standalone page.
Also if I select the Hot Links button when the page opens if I go back up and hover over it to see the submenu each item has an orange background and not a gray one. Essentially I cannot hover over them to select one that’s orange because they are all orange. These are all links though.
Please let me know how I can fix this. Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, on the current page item on Topics issue, add the following to the end of your custom CSS.
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent { background-color: #f7b16b; }On the Hot links issue, find this CSS rule in your custom CSS
.navigation-main li.current_page_item a
and add a right-facing able bracket so that it looks like this.
.navigation-main li.current_page_item > a -
This is so great, thank you! Both items worked, although now there’s just one slight change I’d like to be made.
Your first suggestion to change the Topics button did work but now when I am on a page within the submenu when I go back up to Topics and hover over other pages the Topics button reverts back to purple.
Is there a way to get that one to stay orange? I understand it’s not the “active” page but it’d be ideal for it to stay uniform.
-
Hmmm, that’s strange. Let’s use a slightly bigger hammer. On the CSS rule for the topics, and !important after the color code so it looks like this
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent { background-color: #f7b16b !important; } -
-
-
Hi, I had successfully used your CSS suggestions to change the coloring of my navigation menu to an orange color but I now have another question for you.
When I am on the Home page, and I hover over the Topics or Hot Links page and then hover over items in the submenu, the words Topics or Hot Links are still in dark gray, not white, making it unreadable.
Essentially, when I am on one page and I hover over another page that has a submenu, and then hover over that submenu, how can I change the font color of the parent page for that submenu?
I’d like it to be white. Please let me know how I can do that.
If needed, I’ll start a new thread.Thank you!
-
Oh I also meant to add I changed the orange color to a dark blue. This is where my question stems from. Thank you.
- The topic ‘Menu color change options are not consistent’ is closed to new replies.
WordPress.com Forums 