.MainMenu_MenuContainer - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuContainer better and the part of the menu that is affected. We will replace the original default.css code background-color: transparent; currently in our skin.css file with border: 3px solid blue; background-color: orange;. This demonstration code will change the menu container 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_MenuContainer CSS code as it appears in the skin.css file used in the DNN_Gray Skin and an image validating what the demonstration code does to the Solpart Menu. Click on the image to view a live interactive demonstration of the CSS code in action with your own eyes.
 

The .MainMenu_MenuContainer skin.css demonstration code display.

Live Demo

.MainMenu_MenuContainer - Tips & Tricks

Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Menu Container 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;
}  

.MainMenu_MenuContainer - Suggestions

Find Suggestions for your DotNetNuke Solpart Menu Main Menu Menu Container CSS Class. Click on the suggestions below to find out more.

Horizontal Solpart Menu Property Suggestions - The Default .MainMenu_MenuContainer Class.

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal Solpart Menu Main Menu Menu Container CSS Class Properties simple., i.e. background: transparent;. This allows your horizontal Main Menu background images/colors within the skin to show through the menu container.

How the code should appear in your CSS file.

.MainMenu_MenuContainer
{ /* (DNN default) - CSSContainerRoot - menucontainercssclass */
background: transparent;
}

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

Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Vertical Solpart Menu Main Menu Menu Container CSS Class Properties simple, i.e. background: transparent; width: 100%;. This allows the background images/colors within the skin to show through the menu container, plus giving a width of 100% maintains a consistent menu display when mouse-over, especially when using background images.

How the code should appear in your CSS file.

.MainMenu_MenuContainer
{ /* (DNN default) - CSSContainerRoot - menucontainercssclass */
background: transparent;
width: 100%; /* 'width: 100%;' when confined by table, if no table, use 'width: 202px;' */
_width: 100%; /* reset ie (Internet Explorer) */
}