How to Make .Primary and Topbar menu style match

[Marty]

Marty

October 27, 2014 at 6:01 pm

I am trying to make the Topbar menu style match the Primary Menu. I am most interested in the transitions, color, background, a and hover styles.

So far I have added this:

#nav-main .sf-menu li:hover, #nav-main .sf-menu ul li a:hover {background-color: #d86b4c;}
#nav-main .sf-menu li {background:#490e0a;-webkit-transition: background .5s;}
#nav-main .sf-menu.sf-js-enabled li a {color:#FFF;-webkit-transition: background .5s;}
#nav-main .sf-menu.sf-js-enabled ul.sf-dropdown-menu li a {color:#490e0a;}
#nav-main ul.sf-menu ul li a {font-size: 16px; background-color: #EEEEEE;-webkit-transition: background .5s;}

I plan on only using the Primary Menu, but wanted to use its style. The only thing not working is when I hover over top level menu, and it includes a sub menu, I move down to hover over a lower item and the lop main meun item background does not change to background: rgba(255,255,255,.2) or background: rgba(73,14,10,.8) like it does on the TopNav menu.

Is there an easier way to make the styes match built into the Virtue Premium Theme?

This line below I tried to also add makes the top menu item always have a hover of background: rgba(73,14,10,.8) and not background-color: #d86b4c; with a transisition to background: rgba(73,14,10,.8);

#nav-main .sf-menu li.sfHover:hover {background: rgba(73,14,10,.8);-webkit-transition: background .5s;}