.MainMenu_RootMenuItem - Description

This additional style class is used by DotNetNuke to style the root menu item, hence the name 'Main Menu, Root Menu Item'.

This CSS class is not found in default.css file, therefore, there is no original code for it.

.MainMenu_RootMenuItem - Example

To help us understand the DonNetNuke CSS Class .MainMenu_RootMenuItem better and the part of the menu that is affected. We will insert the following demonstration code border: solid 4px green; background-color: red;. This demonstration code will display solid borders with a border color of 'green' and a weight of '4px', and background-color of 'red'.

Below you can view the demonstration .MainMenu_RootMenuItem CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images demonstrating 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_RootMenuItem skin.css demonstration code display.

Live Demo

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

Note: The borders specified in the demonstration code do not display in the main menu.

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

Live Demo

This image has the demonstration code for all the default.css classes, along with the .MainMenu_RootMenuItem CSS Class with a yellow background for the Root Menu Item. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

Note: The borders specified in the demonstration code do not display in the main menu and the Main Menu Root Menu Item CSS Class overrides the Main Menu Menu Item Select and the Main Menu Root Menu Item Breadcrumb CSS Classes.

.MainMenu_RootMenuItem - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Root Menu Item 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.

Make sure your existing Main Menu Menu Bar, Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Classes height properties are all the same, in other words match. Let say you want a horizontal menu height of 30px height: 30px;. Then they should all have the same height.

How the code should appear in your CSS file.

.MainMenu_MenuBar
{
height: 30px;
}

.MainMenu_RootMenuItem
{
height: 30px;
}

.MainMenu_RootMenuItemSelected
{
height: 30px;
}

Make sure your existing Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Class padding properties are the same, in other words match. Lets say you want to have the root menu item padding as follows, top 0px, right 10px, bottom 0px, and left 10px, padding: 0px 10px 0px 10px;. Then the root menu item select padding property should match the root menu item padding property preventing inconsistencies on mouse hover.

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{
padding: 0px 10px 0px 10px;
}

.MainMenu_RootMenuItemSelected
{
padding: 0px 10px 0px 10px;
}

Make sure your existing Main Menu Root Menu Item, and Main Menu Root Menu Item Selected CSS Classes font properties are the same, in other words match. Lets say you want to have the root menu item font size that is 12px, with a bold weight, an Ariel family, and dark gray color, font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #333333; /* font color */. Then the root menu item select font properties should match the root menu item font properties preventing inconsistencies on mouse hover.

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color */
}

.MainMenu_RootMenuItemSelected
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #333333; /* font color - for different mouse hover color, change color here */
}

.MainMenu_RootMenuItem - Suggestions

Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Root Menu Item CSS Class. Click on the suggestions below to find out more.

Horizontal Solpart Menu Property Suggestions - For the Default .MainMenu_RootMenuItem CSS Class.

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal Solpart Menu, Main Menu, Root Menu Item CSS Class Properties simple., i.e. color: #000000; font-size: 12px; font-weight: bold; font-family: Ariel, Helvetica, sans-serif; padding: 0px 10px 0px 10px; background: transparent; background-position: center; text-align: center; height: 30px; vertical-align: middle;. This tells the browser to set the font color black, set the font size as 12px, set the font weight to bold, set the,font family to be Arial, pad the text (font) top and bottom with 0px and the right and left with 10px, set the background to transparent allowing the underlying background colors/images to show through, sets the background position to center this is the point your background focus around, sets your text to be center aligned, sets your height to be 30px, and last align the text (font) in the middle of the menu item space vertically (which sits in the menu container).

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{ /* (not a DNN default) - CSSNodeRoot - rootmenuitemcssclass */
color: #000000; /* black, change font styles to fit your skin */
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 10px 0px 10px; /* explicitly set padding for root menu items, padding must be identical for .MainMenu_RootMenuItem, and .MainMenu_RootMenuItemSelected CSS Classes to prevent movement within menu on mouseover (hover) and mouseout. */
background: transparent;
background-position: center;
text-align: center;
height: 30px; /* height must be idetical for .MainMenu_MenuBar, .MainMenu_RootMenuItem, and .MainMenu_RootMenuItemSelected */
vertical-align: middle;
}

Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_RootMenuItem CSS Class.

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Vertical Solpart Menu, Main Menu, Root Menu Item CSS Class Properties simple., i.e. color: #000000; font-size: 12px; font-weight: bold; font-family: Ariel, Helvetica, sans-serif; padding: 0px 7px 0px 7px; background: transparent; background-position: center; text-align: left; height: 20px; vertical-align: middle;. This tells the browser to set the font color black, set the font size as 12px, set the font weight to bold, set the,font family to be Arial, pad the text (font) top and bottom with 0px and the right and left with 7px, set the background to transparent allowing the underlying background colors/images to show through, sets the background position to center this is the point your background focus around, sets your text to be left aligned, sets your height to be 20px, and last align the text (font) in the middle of the menu item space vertically (which sits in the menu container).

How the code should appear in your CSS file.

.MainMenu_RootMenuItem
{ /* (not a DNN default) - CSSNodeRoot - rootmenuitemcssclass */
color: #000000; /* black, change font styles to fit your skin */
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 7px 0px 7px; /* explicitly set padding for root menu items, padding must be identical for .MainMenu_RootMenuItem, and .MainMenu_RootMenuItemSelected CSS Classes to prevent movement within menu on mouseover (hover) and mouseout. */
background: transparent;
background-position: center;
text-align: left;
height: 20px; /* height must be idetical for .MainMenu_MenuBar, .MainMenu_RootMenuItem, and .MainMenu_RootMenuItemSelected */
vertical-align: middle;
}