.MainMenu_MenuBreak - Description

This default style class is used by DotNetNuke to styles the main menu break's appearance ,which is the section between the menu items, hence the name 'Main Menu, Menu Break'.

The original code from default.css file is border-bottom: #EEEEEE 1px solid; border-left: #EEEEEE 0px solid; border-top: #EEEEEE 1px solid; border-right: #EEEEEE 0px solid; background-color: #EEEEEE; height: 1px; These properties of the .MainMenu_MenuBreak CSS Class have specific function, which we will now breakdown for you.

.MainMenu_MenuBreak - CSS Property Functions

Below you can view the original .MainMenu_MenuBreak 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_MenuBreak - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuBreak better and the part of the menu that is affected. We will replace the original default.css code border-bottom: #EEEEEE 1px solid; border-left: #EEEEEE 0px solid; border-top: #EEEEEE 1px solid; border-right: #EEEEEE 0px solid; background-color: #EEEEEE; height: 1px; currently in our skin.css file with border-bottom: orange 4px solid; border-left: #EEEEEE 0px solid; border-top: green 4px solid; border-right: #EEEEEE 0px solid; background-color: #EEEEEE; height: 4px;. This demonstration code will change the sub menu from a top and bottom gray border to a green top and orange bottom border with a 4px height.

Below you can view the demonstration .MainMenu_MenuBreak 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_MenuBreak skin.css demonstration code display.

Live Demo

This image shows you the .MainMenu_MenuBreak 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: There is no change to the Horizontal Menu. I could not find it, if you know where this CSS class actually does something within the main menu, please contact me at info@brucechucker.com.

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

Live Demo

This image has the demonstration code for .MainMenu_MenuContainer, .MainMenu_MenuBar, .MainMenu_MenuItem, .MainMenu_MenuIcon and .MainMenu_SubMenu CSS Classes active keeping a 4px blue border with an orange background for the Menu Container, a height of 30px for the Menu Bar, the 4px red and yellow border with the pink background for the Menu Items, and the lime background and 4px purple border for the Menu Icons, the fuchsia background-color and 4px white border for the sub menu, along with the .MainMenu_MenuBreak CSS Class with the menu break demonstration code not having any affect on the main menu. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.

.MainMenu_MenuBreak - Tips & Tricks

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

Even though the Main Menu Menu Break CSS Class does not seem to have an affect on the solpart menu at the moment. We recommend that you replace your existing code and/or the original default.css code with the following display: none;, just in case the CSS Class begins to display without notice. This should help in preventing it from messing up your current menus.

How the code should appear in your CSS file.

.MainMenu_MenuBreak
{
display: none;
}  

.MainMenu_MenuBreak - Suggestions

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

Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_MenuBreak 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 Break CSS Class Properties simple., i.e. background-color: transparent; border:0px; height: 1px;. This tells the browser to set the background color to transparent allowing the underlying colors and/or images to show through, hides the borders by resetting the default.css code borders to zero, and maintaining the height default.css code as 1px.

How the code should appear in your CSS file.

.MainMenu_MenuBreak
{ /* (DNN default) - CSSBreak - menubreakcssclass - does not affect horizontal menu - however we suggest you still use it when creating a horizontal menu incase in the future it begins to work */
background-color: transparent; /* removes background color from separator image in vertical menu */
border: 0px; /* removes border from separator image in vertical menu */
height: 1px;
}