1

enter image description hereWe are currently building SP 2013 megamenu from managed metadata.It seems worked as expecting if we put the position as absolute. What we trying to achieve is to display megamenu in fixed width and we are thinking to put position as relative. Once we put the position in relative, the top menu display on the left handside (displaying in vertical instead horizontal). however the mega menu item under top navigation display in correct fixed width.

Any advise how to achieve mega menu in fixed width and display as table-row or table-cell.

Basically we would like to achieve mega menu in fixed width like this site: www.adelaidecitycouncil.com

Original css posted by Mike Lutge SharePoint branding global navigation

#DeltaTopNavigation ul.static > li.dynamic-children > ul.dynamic {
    border:1px solid #d1d1d1;
    box-shadow:0px 0px 7px 0px rgba(0,0,0,0.47);
    white-space:normal;
     top: 0!important;
    right: 800px!important;
    width:935px !important;
   display: inline-block;   
   position: relative;

}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.root UL.dynamic UL.dynamic {
    display:block!important;
    font-weight:normal;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic {
    background-color:#cccccc;
    display:table-row;
    width:auto !important;
    border-spacing:10px;
    border:none;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.root > LI > UL.dynamic > LI {
    display:table-cell;
    font-weight:bold;
    padding-right:5px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic > LI > UL {
    display:block !important;
    width:auto;                        
    left:0px !important;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic > LI > UL > LI {
    display:list-item;
    margin-right:10px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox .additional-background.dynamic-children,
#DeltaTopNavigation .nav .ms-core-listMenu-horizontalBox .dynamic .additional-background.dynamic-children {
    background-image:none;
    padding-right:0px;
}
#DeltaTopNavigation ul.dynamic > li.dynamic-children > ul {
    position:relative !important;
    left:0px !important;
    top:0px !important;
    width:auto;
    box-shadow:none;
    display:inline-block !important;
}   
#DeltaTopNavigation li.dynamic > .menu-item {
    height: auto;
    line-height:normal;
    padding: 5px 10px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox ul.root ul.dynamic > li a {
    padding: 5px;
}

As display in the screen attached, The current position is absolute where the mega menu move based on top level. So what we want to achieve is full width and fixed width.

Thanks

  • Can you please attach image of your mega menu? – Viraj Gorajia Nov 29 '16 at 5:59
  • I have attached the screenshot of the current mega menu – Supermode Dec 2 '16 at 2:38
  • If you set position as absolute, it is working, Then what is the issue? – Viraj Gorajia Dec 5 '16 at 10:25
  • Actually your site branding css will be affecting to mega menu css. I have tried same css in my local SP site, i am not facing any issue which shows in vertical align. – Viraj Gorajia Dec 5 '16 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.