Navigation help

[Harry van Breemen]

Hi Bill

I was hoping you could help me with something. I’m looking to get the navigation set up similar to this site from your examples: http://goodkindbayview.com/.

I want it to scroll down the page rather than link to separate pages. I tired adding using custom links in the nav that link #two, #three etc but this isn’t fluid and jumps around.

Could you help me with this?

Cheers
Harry

[Bill Robbins]

Hello Harry,

Great question there. The “smooth scrolling” was added to the theme in version 1.3 so it’s possible that the site is running a version before that. If that’s the case you have a couple of options. You could update the theme to the current version. That should give you smooth scrolling on your home page instead of immediate leaps. You could also make an edit to a file and add it that way.

This is my best guess on the edit since I don’t know the version you’re running for sure.

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose custom-js.php
3. Find this spot:

   
   </script>
   

   and right above that add this:

   
   (Make sure to copy that code directly from the support site and not the notification email).

4. Save your changes.

Hopefully that will add it in if you choose to go that way. Let me know if you have any trouble.

Take care,
Bill

[Harry van Breemen]

This reply has been marked as private.

[Bill Robbins]

Hey Harry,

I’d be glad to take a look for you. It looks like I’m still getting the coming soon page at the moment.

Thanks,
Bill

[Harry van Breemen]

Sorry Bill, should be available now.

Thanks

[Bill Robbins]

Thanks Harry. I took a look for you. I do see that you swapped back to separate pages from the custom links.

With the one page concept did you find the animation just not working smoothly enough? Here are a couple of things you could change. In the editor (Appearance > Edit in your Dashboard) click on the custom-js.php file to edit it.

Find this block:

// Smooth Scrolling 
	jQuery(function($) {
	  $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top - 100
	        }, 1000);
	        return false;
	      }
	    }
	  });
	});

Where it says

top - 100

change the 100 to 80. That will better position the home blocks with the height of your header. If you’d like to make the scrolling instantaneous, you can change the 1000 here:

}, 1000);

to 0 or another number. It’s the animation speed in milliseconds. If you want to remove the animation, I would use 0 so you still have the positioning help.

Let me know how that goes and if I can help out,
Bill

[Harry van Breemen]

This reply has been marked as private.

[Bill Robbins]

I think we’re getting closer. For the custom links, just use

#two
#three
#four

and so on, leaving out the full web address. See if that won’t help out the animation.

Let me know how it goes,
Bill

[Harry van Breemen]

That’s perfect Bill, thanks for your help.

[Bill Robbins]

Glad that helped out. Let me know if you need anything else.

[Author]

Posts