Clever Geek Handbook

Anchor links only working in the navbar

So I am working with a website template and one of the changes I want to make is a contact link. With the default template, all links in the navigation bar are anchor links that go to different sections on the page. I want to change the contact link to a mailto link, but I found that for some reason external links are not working in the navbar.

My problem is that the template consists of a whole bunch of CSS and JS documents, and I don't know which part of the code will cause this problem. External links work elsewhere on the page, but not in the navbar. Do you guys know what code might be causing this so that I can better understand where to look for a solution to the problem?

For what it's worth, the code looks like this:

    <section id="intro">
        <nav id="nav" style="background:-webkit-canvas(background) repeat;">
            <nav id="nav-1" style="background:-moz-element(#background) repeat;">
            <!-- The content between <span> </span> tags will be hidden on mobile version -->
            <ul class="clearfix">
                <li><a href="#education">Edu<span>cation</span></a></li>
                <li><a href="#portfolio">Por<span>tfolio</span></a></li>
                <li><a href="#experience">Exp<span>erience</span></a></li>
                <li><a href="#contact">Con<span>tact</span></a></li>
            </ul>
            </nav>
        </nav>
    </section>
+3


source to share


2 answers


Add a Javascript or JQuery handler to an element like this:



$("a[href=#contact]").on("click", function() {
    //Your code Here...
});
+1


source


thanks for all your suggestions, but I actually got the answer from the designer:

All intro navigation is done as a series of identical page links using a jQuery plugin called jQuery One Page Nav. You can learn more about this:

https://github.com/davist11/jQuery-One-Page-Nav

In the file, assets/js/custom.curriculum.js

you can find the script line that allows this navigation:



$( '#nav ul' ).onePageNav( { scrollSpeed: 400 } );

Based on the plugin, you can add exceptions via classes. Suppose you wanted to keep the default action, you would add an "external" class to this link and then replace the code in the JS file with the following, which adds exceptions for the "external" classes:

$( '#nav ul' ).onePageNav( { scrollSpeed: 400, filter: ':not(.external)' } );

+1


source






More articles:


All Articles