Customizing Orchard 1.5 Navigation

Topics: Writing themes
Jul 28, 2012 at 6:59 AM

I recently migrated my website from 1.4 that used the Advanced Menu module for my primary and side navigation for each page. Once updated the files, all havoc went loose on compilation errors, and then I ended up removing Advanced Menu entirely.

However, I impressed with the development of the new Navigation, but I do have a question on hierarchical navigation, and that is once I place a Content Item under another Content Item in the Navigation page. How do I display this result as a dropdown? I know JQuery is involved, but where would I start?

I even tried to have a separate menu widget under a page's widget layer, but the page's navigation has the same style as the primary navigation. I couldn't find a way in CSS to sesperate them. Right now the CSS...

#layout-navigation, .menu
{
    width: 968px;
    margin: 0 auto 20px auto;
    display: block;
    background:  url('../Content/Images/nav_bg.png') repeat-x left top;
}

nav
{ 
    background:  url('../Content/Images/nav_g.png') repeat-x left top; 
}
    nav .menu
    { 
        margin: 0px; 
        padding: 0px; 
        height: 33px; 
        background: transparent url('../Content/Images/getanestimate_bg.png') no-repeat right top; 
    }
    nav .menu li 
    { 
        float:left; 
        list-style: none;
        height:33px;
        border-right: 1px solid #eee; 
    }
    nav .menu li a 
    { 
        display:block;
        height: 33px;
        margin: 0px 2px 3px 0px; 
        padding: 8px 38px 0px 38px; 
        color: #FFF; 
        font-size: 14px; 
        text-decoration: none; 
    }
    nav .menu li a:hover 
    { 
        background: url('../Content/Images/getanestimate_bg.png') repeat-x right top; 
    }
    nav .menu li:last-child a{
        margin: 0px 2px 1px 0px;
        padding: 8px 70px 0px 70px;  
        background: url('../Content/Images/getanestimate_bg.png') repeat-x left top;
        border-right: 1px sold #586A84; 
        }
    nav .menu li:last-child a:hover 
    { 
        margin: 0px 2px 1px 0px; 
        background: url('../Content/Images/nav_bg.png') repeat-x left top;  
    }

There two ways to display sub-pages, but which is worth taking on in Orchard?

Jan 21, 2013 at 5:17 PM

Hi, can you please provide the steps that you perform in order to migrate Advanced menu data to Orchard menu?