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 4457 posts 17970 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies