Grow your CSS skills. Land your dream job.

How would I get nav links to show an active state when scrolling content for a Responsive website?

  • # May 13, 2013 at 12:30 pm

    Hi all!

    So I’ve coded my first responsive website and I’m using a plugin called “Smooth Scroll” for my nav links which works well. The only caveat is that I cannot get the nav links to show an active state when scrolling to a particular section. I’m not JavaScript fluent and tried a few hacks, but could not get it working.

    Any ideas? Any plugins or custom js you know of that would solve my issue? Any sites you know of whose code I could utilize to make this happen?

    Here’s the Codepen url: http://codepen.io/j-nice/full/BrIbA

    Gracias!
    J-nice

    # May 13, 2013 at 8:27 pm

    /* You get a Type Error on the first line of your script. */
    jQuery(document).ready(function($){
    $(‘header h1 a’).smoothScroll({
    speed: 600
    });

    Ready function should be call this way :
    $(document).ready(function() {
    Your document ready code here
    });
    or
    $(function() {
    your document ready code here.
    });

    Actually your using it like you are using the noConflict() option of jQuery without using it. When noConflict() is use the syntax “jQuery(document).ready(function($) {…})” is use but the global jQuery variable is passed as argument to the ready function($) and then you can use the $ inside your function. But you are not using any other library in your sample code so take the basic syntax of $(function() { /* YOUR FUNCTION CODE HERE */}); and it should work.

    Remember, if your not using any jQuery CONFLICTING library, always use $ instead of jQuery.

    Hope this help.

    # May 15, 2013 at 2:29 pm

    Hi Xordan,

    Thank you for the info! I really appreciate it. I have updated my Doc Ready statements, but I still have the same issue.
    I just updated my codepen with a new plugin that handles ‘smooth scrolling’ and ‘active nav link’ states.
    But, I cannot get my active state to work. I don’t know if it’s a CSS issue, a JS issue or both.
    If you have time, could you have a look?

    Here’s the link: http://codepen.io/j-nice/full/BrIbA

    Gracias!

    # May 15, 2013 at 2:51 pm

    It’s the strangest thing…when I tested it locally it wasn’t working. But when I looked at it on codepen, it works fine.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".