4

I am looking to customize my SP2013 site & was searching for some good site to take inspiration & I ran into this site http://www.adelaidecitycouncil.com/

I am looking to make my header aka global navigation to look like that, have tried increasing width but can't put 3 different page in 3 different column, can any one help me cracking it

ps:- have tried to upload the image but couldn't due to some error in connection.

  • I copied and saved the code as css file and imported in "Master Pages" with Specified CSS link but no change is displayed. What did i miss here? – Tamrat Aug 11 '18 at 17:54
4

I've used that type of mega menu style before in a few sites. Here is a snippet of css below that I use to get those columns like in your example. It assumes you're starting with the default seatle master, so if you've got your own custom master you might need to edit some of the classes.

#DeltaTopNavigation ul.static > li.dynamic-children > ul.dynamic {
    top:auto!important;
}
#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;
}
  • Thanx Mike Lutge , I will try it out !! – Dj21 Mar 9 '16 at 6:47

Your Answer

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

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