.MainMenu_MenuBar - Description

This default style class is used by DotNetNuke to set the height of the main menu bar for the root menu items,  hence the name 'Main Menu, Menu Bar'. And sits inside the menu container that is holding your entire menu structure within it.

The original code from default.css file is cursor: pointer; height:16px; background-color: transparent; These properties of the .MainMenu_MenuBar CSS Class have specific functions, which we will now breakdown for you.

.MainMenu_MenuBar - CSS Property Functions

• Cursor Property: Specifies the type of cursor to display for the pointer device and in this case specifies a pointer that indicates a link.
• Height Property: Specifies the content height of boxes generated by block-level, inline-block and replaced elements and in this case specifies the height to be 16px.
• Background-Color Property: Sets the background color of an element, either a color value or the keyword 'transparent' and in this case specifies the background-color to be transparent allowing the underlying colors and/or images to shine through.

Below you can view the original .MainMenu_MenuBar 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

.MainMenu_MenuBar - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuBar better and the part of the menu that is affected. We will replace the existing default.css code cursor: pointer; height:30px; background-color: Transparent; currently in our skin.css file with cursor: pointer; height:30px; background-color: Transparent;. This demonstration code will only change the menu bar's height from 16px to 30px. Notice we did not remove the demonstration code for .MainMenu_MenuContainer CSS Class keeping the blue border with an orange background. This helps to demonstrate the height change with the Main Menu Menu Bar.

Below you can view the demonstration .MainMenu_MenuBar 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 first image is showing you the .MainMenu_MenuContainer demonstration code display and the second image is showing you the .MainMenu_MenuBar demonstration code display along with the .MaimMemu_MenuContainer demonstration code. Compare the height difference between the two images, you will see the height change from 16px to 30px.

The .MainMenu_MenuContainer skin.css demonstration code display.

Live Demo

The .MainMenu_MenuBar skin.css demonstration code display.

Live Demo

.MainMenu_MenuBar - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Menu Bar 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 code for the Main Menu Menu Container and the Main Menu Menu Bar CSS Classes background property are set to transparent, i.e. background: transparent;. This allows the background images/colors within the skin to show through the menu container and menu bar.

How the code should appear in your CSS file.

.MainMenu_MenuContainer
{
background: transparent;
}

.MainMenu_MenuBar
{
background: transparent;
}  

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;
}

.MainMenu_MenuBar - Suggestions

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

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

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal Solpart Menu Main Menu Menu Bar CSS Class Properties simple., i.e. cursor: pointer; height:30px; background: transparent;. This tells the browser to change your pointer to the default active link pointer, sets your horizontal Main Menu to a height of 30px and allows the background images/colors within the skin to show through the menu container and bar.

How the code should appear in your CSS file.

.MainMenu_MenuBar
{ /* (DNN default) - CSSControl - menubarcssclass */
cursor: pointer;
height: 30px; /* height must be idetical for .MainMenu_MenuBar, .MainMenu_RootMenuItem, and .MainMenu_RootItemHover to prevent movement within the menu on mouseover (hover) and mouseout */
background: transparent;
}

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

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Vertical Solpart Menu Main Menu Menu Bar CSS Class Properties simple, i.e. cursor: pointer; height:20px; background: transparent;. This tells the browser to change your pointer to the default active link pointer, sets your horizontal Main Menu to a height of 20px and allows the background images/colors within the skin to show through the menu container and bar.

How the code should appear in your CSS file.

.MainMenu_MenuBar
{ /* (DNN default) - CSSControl - menubarcssclass */
cursor: pointer;
height: 20px; /* height must be idetical for .MainMenu_MenuBar, .MainMenu_RootMenuItem, and .MainMenu_RootItemHover to prevent movement within the menu on mouseover (hover) and mouseout */
background: transparent;
}