Color of menu hover bar

taxervice · October 2015

Hi, I'm building a site at http://taxervice.com/wp2015/ based of the Be Software demo.

I have imported several pages of content, and added them to the main menu. How do I edit the "hover" color of each menu option? The HOME page still has an aqua color (carried over from the demo content) on top of the text, and then for my new pages, the hover bar is black, and is located underneath the text.

This is what I am referring to (circled in red)...

Can you tell me how to edit the color of that bar, and also how to have it placed above the text for all menu items?

Thanks in advance!

-Cam

Albert · October 2015

Hi,

to make those lines different colors per menu items, we used Custom classes fields for menu items and under Theme options > Custom CSS & JS > Custom CSS section, with custom css we set different colors for different items.

taxervice · October 2015

Hi, I'm pasting what I believe to be the relevant CSS below. Can you tell me what I need to modify to have the color of the bar consistent for all menu items (I'd like to use #8bbf4b), and also what to modify so the color bar will appear ABOVE the text for all menu items?

/* Top bar */

#Top_bar:not(.is-sticky):after { background: url("http://taxervice.com/wp2015/wp-content/uploads/2015/07/home_software_topbar.png") repeat-x; content: ""; display: block; height: 21px; left: 0; position: absolute; width: 100%; z-index: 21; }

/* Menu */

#Top_bar .menu > li.color-sea > a:after { top: 0; background: #00cdc1; }

#Top_bar .menu > li.color-pink > a:after { top: 0; background: #ed007b; }

#Top_bar .menu > li.color-blue > a:after { top: 0; background: #0086e3; }

#Top_bar .menu > li.color-orange > a:after { top: 0; background: #ffbd1f; }

#Top_bar .menu > li > a span:not(.description) { letter-spacing: 2px; }

taxervice · October 2015

I should also note that I need to make the changes for the regular menu and also the sticky menu.

Albert · October 2015

To set the same color for all menu items, you should use below css:

#Top_bar .menu > li > a:after { background: #8bbf4b !important; }

taxervice · October 2015

Thank you for the code. Now the bar (when it appears is the green color). However, in main menu the bar only appears over "home"page (which is originally from the demo. The bar will not display for any other menu links (for new pages I have created.

In sticky menu, the bar also appears above "home", but it appears for all other links also. But the problem is it appears BELOW the text for those links...

Can you troubleshoot this please? I have not edited any css other than what you have provided...

Thanks,

-Cam

Albert · October 2015

Sorry but we are not sure what you want to do exactly. You want to display this bar on hover in regular menu (not when menu is active) and also move the line which is below the menu items in sticky header above?

taxervice · October 2015

Isn't the colored line always supposed to appear above the menu item on mouse-over? I gave you the URL of my development site in the first post - are you not clicking the link to view the issue?

Also, for some reason there is no bar on hover for the new pages I created. Again, an issue I explained and you can view on my site...

http://taxervice.com/wp2015/

Thanks for investigating...

Albert · October 2015

It depends. We got some demos where these lines appear above the menu items on mouse-over but we got demos where it works different. This theme got so many options and possibilities that we don't know what you got in your mind. Of course we checked your site but we did not noticed anything wrong. On your site it works exactly like on some of our demos. If you will explain what exactly you want to do, we'll try to help you because currently we don't know what exactly you need.

There is no BAR above the new menu items because it does not work automatically as you think. For each new item, you must set bar color with similar css as you mentioned above:

/* Menu */
#Top_bar .menu > li.color-sea > a:after { top: 0; background: #00cdc1; }
#Top_bar .menu > li.color-pink > a:after { top: 0; background: #ed007b; }
#Top_bar .menu > li.color-blue > a:after { top: 0; background: #0086e3; }
#Top_bar .menu > li.color-orange > a:after { top: 0; background: #ffbd1f; }

For each new menu item, you must set CSS Classes (optional) name, like we did it (for example color-sea is a class name for one of our items) and then under Theme options > Custom CSS & JS > Custom CSS section, you must set right css. If you won't see the CSS Classes (optional) option for menu items, it means that you must click on "Screen options" button in the right top corner and turn on this field for menu items.

taxervice · October 2015

Ok that is helpful, I'll do more investigating. I have little knowledge of css, so while I saw that code, I didn't connect how it related to the menu items.

taxervice · October 2015

I just made the changes to Custom CSS, and CSS classes for menu items, and all is looking great. Thanks for your help!

-Cam

Albert · October 2015

We're glad to hear that you sorted it out

Color of menu hover bar

Comments