Joomla Templates Club 406,261 posts

[laelgray Friend laelgrayJoin date: May 2010Posts: 6Downloads:0Uploads:0 Thanks: 2]

#151744

I am using the “blue” JA Nickel template and would like the menu items and sub menu items in the top navigation section to have a red background on hover. How do I do this?

I am very new, so need specific instructions. Thank you!

[Phan Gam Friend Phan GamJoin date: June 2008Posts: 216Downloads:0Uploads:2 Thanks: 4 Thanked: 39 times in 38 posts]

#346850

hi,
You can change it following way below :
Open file blue.css in ../templates/ja_nickel/css/colors
1. Change color for main navigation:
Find css code for #ja-mainnav element:

#ja-mainnav .main {
background: #106494;
}

#ja-mainnav li a, #ja-splitmenu a {
border-right: 1px solid #2B7EB8;
color: #DEEFFB;
}

(About line 19 to line 26) And change to:

#ja-mainnav .main {
background: #D33615;
}

#ja-mainnav li a, #ja-splitmenu a {
border-right: 1px solid #DC4D2F;
color: #FDDFD8 ;
}

2. For sub-items you can change all style for #ja-cssmenu (from 128 – 154) as code bellow:

#ja-cssmenu li ul,
#ja-cssmenu li ul ul {
background: url(../../images/blue/trans-bg.png);
border: 1px solid #2B7EB8;
}

#ja-cssmenu li ul li {
border-bottom: 1px solid #2B7EB8;
}

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #106494;
}

#ja-cssmenu li ul a {
color: #DEEFFB !important;
}

Change to:

#ja-cssmenu li ul,
#ja-cssmenu li ul ul {
background: url(../../images/red/trans-bg.png);
border: 1px solid #D33615;
}

#ja-cssmenu li ul li {
border-bottom: 1px solid #D33615;
}

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #D33615;
}

#ja-cssmenu li ul a {
color: #FDDFD8 !important;
}


3. For search word’s background :
finding following css code secsion :

#mod_search_searchword {
background: #2B7EB8 ;
border:1px solid #DEEFFB;
color: #DEEFFB;
}

(about line 28) and change to

#mod_search_searchword {
background: #DC4D2F ;
border:1px solid #FDDFD8 ;
color: #FDDFD8 ;
}

Hope can help you.Thanks

[laelgray Friend laelgrayJoin date: May 2010Posts: 6Downloads:0Uploads:0 Thanks: 2]

#347016

Thank you. This changes the color of the menu to red, but I would like the color to be red only on “hover.” In other words, I’d like the menu to appear blue, but when someone hovers over a menu item, I would like only that specific menu item to turn red. Is that possible?

[Phan Gam Friend Phan GamJoin date: June 2008Posts: 216Downloads:0Uploads:2 Thanks: 4 Thanked: 39 times in 38 posts]

#347056

Hi laelgray,
I am sorry for not read your request carefully. To change color where hover menu Item, You can do it following way below:
1. Open file blue.css in ../templates/ja_nickel/css/colors folder
2. Find following code section:

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #106494;
}
About line 138 to line 150.
And Change to:

#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus
{
background: #106494;
}
#ja-mainnav li a:hover,
#ja-cssmenu li ul a:hover,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #D33615;
}
Hope can help you. Thanks

[laelgray Friend laelgrayJoin date: May 2010Posts: 6Downloads:0Uploads:0 Thanks: 2]

#347135

Thank you! I will try this. I have another question that I started a new thread on, but maybe you can help with this, too?

On the right hand column menus, I would like the sub-menu items to have a “hover” status of some sort – either underlined or a background color to indicate that these are an active link. It would be even better if the sub-menu items could also retain a background color once selected in the same way that the top menu list items do.

Do you know how I can achieve that?

– Lael

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#347348

Hi laelgray,

I just checked and I saw that when I hovered the menus on the right side the background color has changed

Also I saw that the background color of selected menu item is different from non select menu item.

[laelgray Friend laelgrayJoin date: May 2010Posts: 6Downloads:0Uploads:0 Thanks: 2]

#347473

I am not seeing any kind of hover status for the sub menu items, though. I would like the second level menu options to either show an underline or a background color when you hover over them.

Please see this page: http://69.89.31.156/~smartst8/index.php?option=com_content&view=article&id=98&Itemid=102

You will see that there is a sub menu under “Technical Assistance & Training.” I would like those menu items to have a hover status and a selected status. Is that possible?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#347825

<em>@laelgray 183358 wrote:</em><blockquote>I am not seeing any kind of hover status for the sub menu items, though. I would like the second level menu options to either show an underline or a background color when you hover over them.

Please see this page: http://69.89.31.156/~smartst8/index.php?option=com_content&view=article&id=98&Itemid=102

You will see that there is a sub menu under “Technical Assistance & Training.” I would like those menu items to have a hover status and a selected status. Is that possible?</blockquote>

Dear Friend,

Please kindly referring this url
http://www.joomlart.com/forums/topic/aply-the-same-effect-to-the-low-level-menus/#post-346487

i hope it help !

[Author]

Posts