.MainMenu_MenuIcon - Description

This default style class is used by DotNetNuke to style the icon on the left handside of the menu items, which is part of the menu item, hence the name 'Main Menu, Menu Icon'.

The original code from default.css file is cursor: pointer; background-color: #EEEEEE; border-left: #EEEEEE 1px solid; border-bottom: #EEEEEE 1px solid; border-top: #EEEEEE 1px solid; text-align: center; width: 15px; height: 21px;. These properties of the .MainMenu_MenuIcon CSS Class have specific functions, which we will now breakdown for you.

.MainMenu_MenuIcon - CSS Property Functions

Below you can view the original .MainMenu_MenuIcon CSS code as it appears in the default.css file and an image of the DNN_Gray, Horizontal Menu - Fixed Width Skin using the Solpart Menu.
 

The DNN_Gray, Horizontal Menu - Fixed Width Skin modified with a Solpart Menu using the default.css code display.

Live Demo

With exceptions of the 'light gray' (#EEEEEE) borders and background-colors, and the 'white' (#FFFFFF) borders and background-colors being changed to the color 'gray' (#CCCCCC) to bring about a more seemless menu presentation.

.MainMenu_MenuIcon - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuIcon better and the part of the menu that is affected. We will replace the original default.css code cursor: pointer; background-color: #EEEEEE; border-left: #EEEEEE 1px solid; border-bottom: #EEEEEE 1px solid; border-top: #EEEEEE 1px solid; text-align: center; width: 15px; height: 21px; currently in our skin.css file with cursor: pointer; background-color: lime; border-left: purple 4px solid; border-bottom: purple 4px solid; border-top: purple 4px solid; text-align: center; width: 30px; height: 30px;. This demonstration code will change the menu icon from a transparent background allowing the underlying colors and/or images to show through to a blue border with an orange background.

Below you can view the demonstration .MainMenu_MenuIcon CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images validating what the demonstration code does to the Solpart Menu. Click on the images to view a live interactive demonstration of the CSS code in action with your own eyes.
 

The .MainMenu_MenuIcon skin.css demonstration code display.

Live Demo

This image shows you the .MainMenu_MenuIcon CSS class demonstration code being used in the skin.css file, for the DNN_Gray Fixed Width Skin, modified to use a Solpart Menu. 

The .MainMenu_MenuIcon multiple CSS classes skin.css demonstration code display.

Live Demo

This image has the demonstration code for .MainMenu_MenuContainer, .MainMenu_MenuBar and .MainMenu_MenuItem CSS Classes active keeping a 4px blue border with an orange background for the Menu Container, a height of 30px for the Menu Bar and the 4px red and yellow border with the pink background for the Menu Items, along with the .MainMenu_MenuIcon CSS Class with the lime background and 4px purple border for the Menu Icons. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

.MainMenu_MenuIcon - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Menu Icon CSS Class. Click on the tips & tricks below to find out more or view all our Solpart Menu CSS Classes Tips & Tricks in one place.

Replace your existing and/or the original default.css Main Menu Menu Icon CSS Class code with the following display: none;.

How the code should appear in your CSS file.

.MainMenu_MenuIcon
{
display: none;
}  

Make sure your existing Main Menu Menu Item, Main Menu Menu Icon, and Main Menu Sub Menu Item Selected CSS Classes padding properties are all the same, in other words match. Lets say you want to have a menu item and menu icon padding as follows, top 2px, right 5px, bottom 2px, and left 5px padding: 2px 5px 2px 5px;. Then they should all have the same padding.

How the code should appear in your CSS file.

.MainMenu_MenuItem
{
padding: 2px 5px 2px 5px;
}

.MainMenu_MenuIcon
{
padding: 2px 5px 2px 5px;
}

.MainMenu_SubMenuItemSelected
{
padding: 2px 5px 2px 5px;
}  

.MainMenu_MenuIcon - Suggestions

Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Menu Icon CSS Class. Click on the tips & suggestions to find out more.

Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_MenuIcon CSS Class.

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal and Vertical Solpart Menu, Main Menu, Menu Icon CSS Class Properties simple., i.e. display:none; background:transparent; padding: 2px 5px 2px 5px; border: 0px #FFFFFF solid;. This tells the browser to hide the Menu Icons, set the background as transparent to allow the background colors/images to show through, pad the Menu Icons top and bottom with 2px and the right and left with 5px, hide the borders by resetting the default.css code borders to zero.

How the code should appear in your CSS file.

.MainMenu_MenuIcon
{ /* (DNN default) - CSSIcon - menuiconcssclass */
display:none; /* removes icon display from menu */
background:transparent; /* Icon background color */
padding: 2px 5px 2px 5px; /* padding must be identical for .MainMenu_MenuItem, .MainMenu_MenuIcon, and .SubMenuItemSelected CSS Classes to prevent movement within menu on mouseover (hover) and mouseout. */
border: 0px #FFFFFF solid; /* hides icon border by resetting the default.css code border width to 0px, OR use background-color of .MainMenu_SubMenu*/
}