I am trying to set a fixed width for TopNavigationMenu but in CSS if i do it then it does set fixed with but the menu items go beyond the width.

Is there any we can restrict the width of the menu and enable menu to be displayed in multiple lines?

I am not an expert in CSS so would like to know if i need to explore any specific property in order to get this done.

enter image description here

1 Answer 1


Here is quick dirty solution:

  • Add an extra Menu item, name it whatever your want,
    this is were the linebreak will be forced in

  • count which LI nth-child this is

  • add CSS to display this LI item as a block, and force TWO linebreaks (before and after)

  • add CSS so this blocked LI is not visible and has 0px height,
    so it looks like one linebreak

#zz12_RootAspMenu li:nth-child(3) {
    display: block;
    border:1px solid red;
    /* visibility:hidden; */
    /* height:0; */

Edit the links will screw up the HTML, so this only seems to work on page load

A nicer solution would be to use position:relative on a parent DOM element and apply float:left to those LIs, but takes some more experimenting and way more CSS rules

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.