0

I have a custom master page and I need one of the nav items to link to a section on the same page.

<section class="mt-3 pt-4 pb-5 grey lighten-4" id="cyberHeroes">
        <div style="position: relative;" class="container-fluid">
            <div class="container">
                <h2 class="h2-responsive font-weight-bold text-center cyberHeroes">Everyday Cyber Heroes</h2>
                <p><strong>Heroes are found everywhere.</strong> It could be you, and you may not even know it. An Everyday Cyber Hero is an ordinary individual 
                that practices good cybersecurity habits everyday and anywhere. At Broward County, our employees are the first line of defense in recognizing and 
                reporting cyber threats. You can make a difference. <a href="http://bc-net/CyberSecurity/Articles/Pages/How-to-Become-an-Everyday-Cyber-Hero.aspx">Learn more about becoming an Everyday Cyber Hero.</a>
                </p>
            </div>
            <div id="flickityCarousel" class="container cyber-carousel">
                <!--Inject Carousel Here-->
            </div>
        </div>
    </section>

I added the id to the HTML as shown above and added the URL to the navigation item

/CyberSecurity#cyberHeroes

but it doesn't work. I also added a code on the page layout that looks like this

<script type="text/javascript">
    $( document ).ready(function() {
    //About the following block of code
    //Because of SharePoint MDS, SP doesnt like appending data to the querystring of a navigation item.
    //If a navigation item has data appeneded like a ? or #, it gets stripped off. I have contacted MS about this and this is by design
    //To get around this, I have that when a navigation item label startes with #, then the #gets stripped off and the url gets
    //appended a # along with the label with spaces stripped off, so the anchor tag will work. -- TJF
        $anchorResults = $('a').filter(function() {
            var txt = $(this).text();
        
            return (txt.length > 1 && txt[0] == '#');
        });
        
        $.each($anchorResults, function (index, value) {
            var txt = $(value).text().substring(1);
            var href = $(value).attr('href') + '#' + txt.replace(/ /g, '');
        
            $(value).text( txt );
            $(value).attr('href', href);
        });
        //End Block
    
    });
    </script>

But no positive results. When I go back to the seetings > Navigation the URL I added goes back to this

/CyberSecurity

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.