How to change the Custom Menu style

Column width

[YourMagentoDir]/skin/frontend/default/[YourSkin]/css/webandpeople/custommenu/custommenu.css

There is #custommenu div.column style to set column width. By default column width is 23% + 2% (paddings) for 4-columns popup

You can change width of menu column up to 98% for one-column popup.

There is #custommenu div.wp-custom-menu-popup style to set popup width. You can set width of menu popup for example to 200px

Design

Download example custommenu.css

Download RTL example custommenu.css

Copy file from the .zip to /YourMagentoDir/skin/frontend/default/YourSkin/css/webandpeople/custommenu/custommenu.css

Menu background

The menu background style

The popup background style

The active menu background style

Useful free CSS Gradient Generator: colorzilla.com

Menu fonts

The font color

The main menu font color

The popup 1-level menu font color

The popup 2-level menu font color

The popup hover-effect color and active menu style

How to make a link look as though it is permanently highlighted

For example, please see LightShop Green Magento Template

There is a custom css-style for category ID=28 in the end of the skin.css file.

div#menu28 a {
	background: #bbcc00; /* Old browsers */
	background: -moz-linear-gradient(top, #bbcc00 1%, #97b200 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #bbcc00), color-stop(100%, #97b200)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bbcc00 1%, #97b200 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bbcc00 1%, #97b200 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bbcc00 1%, #97b200 100%); /* IE10+ */
	background: linear-gradient(top, #bbcc00 1%, #97b200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbcc00', endColorstr='#97b200', GradientType=0 ); /* IE6-9 */
}
div#popup28 {
	background: #fdffe5; /* Old browsers */
	background: -moz-linear-gradient(top, #fdffe5 2%, #ffffff 53%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #fdffe5), color-stop(53%, #ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fdffe5 2%, #ffffff 53%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fdffe5 2%, #ffffff 53%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fdffe5 2%, #ffffff 53%); /* IE10+ */
	background: linear-gradient(top, #fdffe5 2%, #ffffff 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdffe5', endColorstr='#ffffff', GradientType=0 ); /* IE6-9 */
}

This is a guide on how to change background and links style in the Responsive Custom Menu free Magento Extension.

Custom Menu is an advanced free Magento menu that allow you to create responsive horizontal Magento navigation menu.

Back

Go to contents Back to previous page

Tags: