Styling the Universal CSS Navigation Menu
Learn the Basics of Universal CSS Navigation Menu Styling
Question:
How do i change Fonts, Colors, Margins or Paddings of the menu?
Answer:
You can easily change these settings by setting the Universal CSS Navigation Menu design to: Default and opening the dmxNavigationMenu.css file, that is located in the Styles folder of your site.
Here are the basic CSS properties you need to know in order to style the Menu look:
Note: In order to be sure you won't lost your customizations after updating the Universal CSS Navigation Menu please copy and paste the properties you want to change from dmxNavigationMenu.css into a new customMenu.css file and include it on your page.
.dmxNavigationMenu {
position: relative;
background-color: #eee; /*Sets the background color of the menu bar*/
min-height: 1%;
}
.dmxNavigationMenu * {
font-family: Arial; /*Sets the font family of the whole menu*/
font-size: 12px; /*Sets the font size of the whole menu*/
color: #333; /*Sets the font color of the whole menu*/
}
.dmxNavigationMenu ul {/*This property affects all of the menu item containers - Top, Sub and Mega menus*/
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.dmxNavigationMenu li {/*This class affects all of the menu items - located in the Top, Sub and Mega menus*/
display: block;
position: relative;
white-space: nowrap;
zoom: 1;
}
.dmxNavigationMenu ul.horizontal {/*This class affects the Horizontal Menu items container only */
float: left;
}
.dmxNavigationMenu ul.horizontal > li {/*This class affects the Horizontal Menu Top items only*/
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
float:left;
}
.dmxNavigationMenu ul.mega,
.dmxNavigationMenu ul.sub {/*This class affects the Sub and Mega Menu item containers only */
position: absolute;
top: 0;
left: 97%;
display: none;
background-color: #eee;
border: 1px solid #999;
width: 150px;
z-index: 99;
}
.dmxNavigationMenu li a {/*This class affects all of the Links of the menu*/
display: block;
padding: 5px;
text-decoration: none;
overflow: hidden;
outline: none;
zoom: 1;
}
.dmxNavigationMenu ul.horizontal > li > a {/*This class affects the Horizontal Top Menu Items Links only*/
*display: inline;
}
.dmxNavigationMenu li a.selected,
.dmxNavigationMenu li a:hover,
.dmxNavigationMenu li a.hover {/*This classes affect all of the Links of the menu*/
background: #09c;
color: #fff;
}
Comments
Be the first to write a comment
You must me logged in to write a comment.