SharePoint branding global navigation

Question

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.

Answer 1

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;
}