Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ben Crossland 2 posts 72 karma points
    Sep 25, 2015 @ 09:55
    Ben Crossland
    0

    Change menu navigation style

    Hi Guys!

    The template I have selected is currently a hamburger menu option (which sucks).

    I would like to change the menu navigation to the normal. I.e Home / About Us / Services / Contact us

    *I know I should have selected the right template originally - but too far into the web build to change now.

    Any help / advice would be kindly appreciated.

    Thanks, Ben

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 25, 2015 @ 11:45
    Dennis Aaen
    1

    Hi Ben,

    This code below should do what you are looking for.

    @{
        // Model.Content is the current page that we're on
        // AncestorsOrSelf is all of the ancestors this page has in the tree
        // (1) means: go up to level 1 and stop looking for more ancestors when you get there
        // First() gets the first ancestor found (the home page, on level 1)
        var homePage = CurrentPage.AncestorsOrSelf(1).First();
    
        // The menu items we want are all of the children of the homepage
        // We also check if "Hide in navigation" is on in the menu, we shouldn't show hidden items
        var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
    }
    <!-- Nav -->
    <nav id="nav" class="skel-panels-fixed">
        <ul>
            @* If the Url of the current page is "/" then we want to add the class "current_page_item" *@
            @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
            <li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a href="/">Home</a></li>
    
            @foreach (var item in menuItems)
            {
                @* If the Id of the item is the same as the Id of the current page then we want to add the class "current_page_item" *@
                @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
                <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)"><a href="@item.Url">@item.Name</a></li>
            }
        </ul>
    </nav>
    <!-- /Nav -->
    

    Hope this helps,

    /Dennis

Please Sign in or register to post replies

Write your reply to:

Draft