change nav hover box color
Permalink
I've search for 5 days and could not find "how to change Nav hover box color and how to change the box color after selecting a Menu item in the nav.
Even the creator of several menu blocks I bought are not giving any help.
See test site:http://www.aseanexhibition.com
Top Nav is Mega Menu which I am trying to change the hover box color, force it to have a different box color after selecting a menu item, and stay selected until I click on another top level menu item. So far Mega Menu is proving unchangeable or most probably I don't know how and help apparently will not come free.
Even the creator of several menu blocks I bought are not giving any help.
See test site:http://www.aseanexhibition.com
Top Nav is Mega Menu which I am trying to change the hover box color, force it to have a different box color after selecting a menu item, and stay selected until I click on another top level menu item. So far Mega Menu is proving unchangeable or most probably I don't know how and help apparently will not come free.
Thanks for the reply.
If you visit this test sitehttp://www.aseanexhibition.com you will see 2 navs. Everything is ready to go except I cannot customise Mega Menu to show a hover box color other the default white hover box. The other problem is Mega Menu's white box hover disappear after clicking on a Nav menu.
I was hoping if someone can post tips how to make and change hover box color I could adopt it tweeking Mega Menu.
I am using Orange Pro theme but if you familiar with creating hover box and changing its hover color, maybe I could learn from that.
If you visit this test sitehttp://www.aseanexhibition.com you will see 2 navs. Everything is ready to go except I cannot customise Mega Menu to show a hover box color other the default white hover box. The other problem is Mega Menu's white box hover disappear after clicking on a Nav menu.
I was hoping if someone can post tips how to make and change hover box color I could adopt it tweeking Mega Menu.
I am using Orange Pro theme but if you familiar with creating hover box and changing its hover color, maybe I could learn from that.
Thanks for providing the link; it makes all the difference in the world. The more information available, the easier it is to provide some direction :D
(Mega Menu)
The CSS for the topmost (presumably 'black' templated) megamenu is located at
but has little to do with the colors of the boxes housing the menu items; it is an image based container, so changing the black/white scheme will take an image editor, like photoshop or gimp. The file to modify is located here (as defined on line 13 of the CSS):
You can see the different states pretty clearly, and could use the third state to take advantage of the a:active (ie. clicked) pseudo class, by choosing another color and adding the definition after the hover on line 16; maybe something like
The 'color' refers to the color of the text, not the box, and can be changed for each state accordingly, to make sure the text stands out against the box - once the colors of the .png have been customized.
It's not clear if the active state is what you're after, or if it's a change in the color of the menu item according to the page currently being viewed - the above should suffice for the former, but the latter would likely involve some coding within the block's controller, detecting the current page and comparing it against the menu items, or checking the heredity of the current page to see if it falls within the purview of each menu item.
Keep in mind that if you switch the megamenu template from 'black' to 'custom,' the corresponding CSS file will probably switch too, and any changes made to the above CSS file will need to be carried over appropriately. Looks like Orange Pro may contain an alternate template.
(Orange Pro)
By comparison, the 'Orange Pro' theme and implementation of what looks to be the autonav is probably going to be closer to what you appear to be after, in that it does highlight the current page with a distinctly colored box, and can be visually modified, for the most part, from within the appropriate CSS file located at:
Again, you've got an image to contend with to modify the box color, but since this menu implements a repeating slice, it should be a pretty quick job to change it to a hue more to your liking:
As far as making the change to megamenu goes, if you're willing to put some time into it, modifying the controller and view will produce the results sought after; trying to explain how to do it would require a little more time and information.
Hope this helps!
(Mega Menu)
The CSS for the topmost (presumably 'black' templated) megamenu is located at
/packages/jb_megamenu/blocks/jb_megamenu/css/skins/black.css
but has little to do with the colors of the boxes housing the menu items; it is an image based container, so changing the black/white scheme will take an image editor, like photoshop or gimp. The file to modify is located here (as defined on line 13 of the CSS):
/packages/jb_megamenu/blocks/jb_megamenu/css/skins/images/bg_black.png
You can see the different states pretty clearly, and could use the third state to take advantage of the a:active (ie. clicked) pseudo class, by choosing another color and adding the definition after the hover on line 16; maybe something like
.black ul.mega-menu li a:active{background-position: 100% -80px; color: #cc3300; text-shadow: none;}
The 'color' refers to the color of the text, not the box, and can be changed for each state accordingly, to make sure the text stands out against the box - once the colors of the .png have been customized.
It's not clear if the active state is what you're after, or if it's a change in the color of the menu item according to the page currently being viewed - the above should suffice for the former, but the latter would likely involve some coding within the block's controller, detecting the current page and comparing it against the menu items, or checking the heredity of the current page to see if it falls within the purview of each menu item.
Keep in mind that if you switch the megamenu template from 'black' to 'custom,' the corresponding CSS file will probably switch too, and any changes made to the above CSS file will need to be carried over appropriately. Looks like Orange Pro may contain an alternate template.
(Orange Pro)
By comparison, the 'Orange Pro' theme and implementation of what looks to be the autonav is probably going to be closer to what you appear to be after, in that it does highlight the current page with a distinctly colored box, and can be visually modified, for the most part, from within the appropriate CSS file located at:
/packages/theme_orange_pro/themes/orange_pro/main.css
Again, you've got an image to contend with to modify the box color, but since this menu implements a repeating slice, it should be a pretty quick job to change it to a hue more to your liking:
// current page: /packages/theme_orange_pro/themes/orange_pro/images/nav-selected_bg.gif // hover: /packages/theme_orange_pro/themes/orange_pro/images/nav-selected_bg_dim.gif
As far as making the change to megamenu goes, if you're willing to put some time into it, modifying the controller and view will produce the results sought after; trying to explain how to do it would require a little more time and information.
Hope this helps!
Box colour is controlled by the CSS.
If you post link to website I can help CSS.
If you post link to website I can help CSS.
Thanks. At least now I am getting some offer of help.
I am posting here the reply I posted above.
If you visit this test sitehttp://www.aseanexhibition.com you will see 2 navs. Everything is ready to go except I cannot customise Mega Menu to show a hover box color other the default white hover box. The other problem is Mega Menu's white box hover disappear after clicking on a Nav menu.
I was hoping if someone can post tips how to make and change hover box color I could adopt it tweeking Mega Menu.
I am using Orange Pro theme but if you familiar with creating hover box and changing its hover color, maybe I could learn from that.
I am posting here the reply I posted above.
If you visit this test sitehttp://www.aseanexhibition.com you will see 2 navs. Everything is ready to go except I cannot customise Mega Menu to show a hover box color other the default white hover box. The other problem is Mega Menu's white box hover disappear after clicking on a Nav menu.
I was hoping if someone can post tips how to make and change hover box color I could adopt it tweeking Mega Menu.
I am using Orange Pro theme but if you familiar with creating hover box and changing its hover color, maybe I could learn from that.
This has been resolved.
Grayda or David, the creator of Orange Pro added for me a second Nav -- as an after sales service -- that I can customised independently of the other Nav.
The top Nav is the original Nav that came with Orange Pro theme. The lower subnav, is the submenu added by David.
Grayda or David, the creator of Orange Pro added for me a second Nav -- as an after sales service -- that I can customised independently of the other Nav.
The top Nav is the original Nav that came with Orange Pro theme. The lower subnav, is the submenu added by David.
A little difficult to be more specific without any particulars; can you provide a link to a page with the menu you'd like to affect on it?