Hi Bryanne

Did you mean url part after "#" as anchor?

Umbraco doesn't handle this part of url, it's client side totally. You have to use some js script for doing it.

Thanks,

Alex

Hi Bryanne,

In your code that generates the menu, you should be able to use something like:

@Model.Content.Site.Url

This should get the root node of your site so you can append it your anchor entries when creating the menu.

Alternatively, you could just append "/" before your anchors when you create the menu.

:-)

Nik

the @Model.Content.Site.Url throws this error:'Umbraco.Web.PublishedContentExtensions.Site(Umbraco.Core.Models.IPublishedContent)' is a 'method', which is not valid in the given context

and, using

<a href="/#opportunity">Opportunity</a>

works fine on the root page, but on a child page it doesn't navigate it back to the root page, it just sits there.

Hi Bryanne,

You can also do it like this:

<a href="@Umbraco.TypedContentAtRoot().First().Url#opportunity"> Opportunity </a>

Hope this helps!

Amir

Is there an error in the Chrome developer console when you click the link?

Are you using AngularJS or Angular?

There are no errors. Im using Razor/mvc, no angular etc.

When using

<a href="@Umbraco.TypedContentAtRoot().First().Url#opportunity"> Opportunity </a>

i get this HTML output

<a href="/#opportunity">Opportunity</a>

Which works fine on the home page, but from a child page it still doesnt' navigate anywhere

Im working in a local dev environment if that matters

That's really bizarre...are your child pages underneath your homepage? Mind uploading a screenshot of your content tree?

This is my content tree.

This is my menu code:

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
 @using umbraco.MacroEngines;

 @{ var home = CurrentPage.Site(); }
 @if (home.Children.Any())
 {
@* Get the first page in the children *@
 var naviLevel = home.Children.First().Level;

@* Add in level for a CSS hook *@
<ul id="js-navigation-menu" class="navigation-menu">


    @*Static anchor links with no pages*@
    <li><span><a href="@Umbraco.TypedContentAtRoot().First().Url#opportunity" class="anchor-link">Opportunity</a></span></li>
    <li><span><a href="@Umbraco.TypedContentAtRoot().First().Url#empowering-philanthropy" class="anchor-link">Empowering Philanthropy</a></span></li>
    <li><span><a href="@Umbraco.TypedContentAtRoot().First().Url#who-we-are" class="anchor-link">Who we are</a></span></li>
    @* For each child page under the home node *@
    @foreach (var childPage in home.Children.Where("umbracoNaviHide != true"))
    {
        if (childPage.Children.Any())
        {
            <li class="has-child">
                @if (childPage.DocumentTypeAlias == "LandingPage")
                {
                    <span><a href="@childPage.Url" class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">@childPage.Name <i class="fa fa-angle-down"></i></a></span>
                    @childPages(childPage.Children)
                }
                else
                {
                        <span><a href="@childPage.Url" class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">@childPage.Name</a></span>
                }
            </li>
        }
        else
        {
            <li>
                <span><a href="@childPage.Url" class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">@childPage.Name</a></span>
            </li>
        }
    }
</ul>
 }
 @helper childPages(dynamic pages)
 {
@* Ensure that we have a collection of pages *@
 if (pages.Any())
 {
@* Get the first page in pages and get the level *@
 var naviLevel = pages.First().Level;

@* Add in level for a CSS hook *@
<ul class="submenu">
    @foreach (var page in pages)
    {
        <li>
            <a href="@page.Url" class="@(page.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">@page.Name</a>

        </li>
    }
</ul>
 }
 }

and this is how the HTML renders

<nav role="navigation" id="nav" itemscope itemtype="http://schema.org/SiteNavigationElement">

<ul id="js-navigation-menu" class="navigation-menu">

    <li><span><a href="/#opportunity" class="anchor-link">Opportunity</a></span></li>
    <li><span><a href="/#empowering-philanthropy" class="anchor-link">Empowering Philanthropy</a></span></li>
    <li><span><a href="/#who-we-are" class="anchor-link">Who we are</a></span></li>
    <li><span><a href="/news/">News</a></span></li>
    <li><span><a href="/contact-us/">Contact Us</a></span></li>
</ul>

</nav>

That looks normal and I just tried the code for your nav and it worked fine for me.

Are you sure there isn't something with the JS for your menu that's catching the anchor links and preventing navigation?

As a test, you may want to just remove that javascript and see if navigation occurs as expected.

-Amir

I was actually just investigating the JS myself.

Seems there's something in here thats breaking it.

$(document).ready(function () {
var menuToggle = $('#js-mobile-menu').unbind();

menuToggle.on('click', function (e) {
    e.preventDefault();
    $('#js-navigation-menu').toggleClass("mobile-anchors");
    $('#js-navigation-menu').slideToggle(function () {
        if ($('#js-navigation-menu').is(':hidden')) {
            $('#js-navigation-menu').removeAttr('style');
        }
    });
});

var anchorToggle = $('.anchor-link').unbind();

anchorToggle.on('click', function (e) {
    e.preventDefault();

    $('a').each(function () {
        $(this).removeClass('selected');
    })
    $(this).addClass('selected');

    $('.mobile-anchors').slideToggle(function () {
        if ($('.mobile-anchors').is(':hidden')) {
            $('.mobile-anchors').removeAttr('style');
            $('#js-navigation-menu').removeClass("mobile-anchors");
        }
    });
});
});

What this is, is a function to open my mobile menu, and then, when clicking the anchor links, to close said mobile menu.

Ahhh. So this "e.preventDefault();" prevents the default action (navigating to the target) of the anchor tag from occurring :)

You'll likely want to rework your js logic.

-Amir

Yup. Unfortunately i'm not a JS guru, so might take me some time. If you have any tips that would be great!

You may want to look at some of the menu plugins that are out there if you want to make it easy on yourself. We use this one quite often: https://github.com/vadikom/smartmenus

Also, I'm not sure why, if you're wanting to navigate to a new page, you need to close the menu? Wouldn't it just be closed when you land on the new page?

Hope this helps,

Amir

There's 3 links that are anchors, so those need to close the menu, and there's 2 that are actual pages.

General guidance would be to add a class to the toggle links only and only apply your preventdefaut method / toggle logic to those.

Away from my desk or would write something up for you.

Thanks! working that thru now

is working on a reply...