Please follow the steps below to change the CSS of the Header Navigation Menu:
1. Open the “main-responsive.css” file using Notepad.
Menu.css is located in the “templates/default/css” folder.
2. Locate any code in the
file that contains vp_horomenu and megamenu-dropdown; for example:
.megamenu-dropdown {
display: none;
position: absolute;
width: 150px;
z-index: 999;
}
.megamenu-dropdown ul {
padding: 5px 0px;
}
#vp_horomenu li {
list-style: none;
}
.megamenu-dropdown a
{
display: block;
line-height: 1.42857;
padding: 3px 20px;
width: 100%;
}
.megamenu-dropdown a:hover, .megamenu-dropdown a:focus {
background-color: #f5f5f5;
}
#vp_horomenu li {
position: relative;
text-transform: Uppercase;
}
#vp_horomenu li:hover .megamenu-dropdown {
display: block;
}
3. Directly update the CSS above to reflect your own horizontal menu style. You need to be familiar with CSS in order to update this.
For more information about CSS, please refer to:
http://www.w3schools.com/Css/default.asp
For example, if you wish to change the highlight color in the dropdown menu to red, then please update the CSS as shown below:
.megamenu-dropdown a:hover, .megamenu-dropdown a:focus {
background-color: #FF0000;
}
4. Save the file and upload to the “templates/default/css” folder.
Preview before the changes:
After changes:
NOTE: The preview shown above is just an example of how to change the dropdown highlight color of the horizontal menu. You can, of course, change any of the CSS codes that contain vp_horomenu and megamenu-dropdown to create your own style.