Link within homepage using main navigation

[digitalbum]

Website: http://www.digital-syrup.com/citywok/

Ok so a couple of things, first I’d like for the “Menu” tab in the main navigation on the homepage to scroll down to the anchor point on the same page. It does this already as I’ve added an anchor to the Home Page Template. Here’s the code:

And I added a custom link in Appearance>Menus (“menus” has like, a lot of meaning in this particular case, haha) titled “Menu” and the link is “http://www.digital-syrup.com/citywok/#linktomenu”

It works, sort of. But “Menu” in the main navigation is highlighted blue as an active page (which I don’t want) AND it abruptly jumps, no animated scroll (which I want but may be beyond the scope of this forum).

Anyway, any advice would be appreciated. Let me know if you need more info, thanks!

[Bill Robbins]

Great looking site first of all. Thank you for your business too.

You can create same page links. I set up each section of the home page to have a corresponding ID that you can use to set up the links. The first section is #one, then #two, #three and so on.

When you’re creating the Custom Link, just use the #section-number. That will cause the link to work properly, and it’ll keep WordPress from adding the current page class to the link too.

It’s also possible to have a separate navigation menu for the home page only. If you’d like to do that, let me know and I’ll give you the details.

For adding in good internal scrolling, you might look at this post on smooth scrolling or Ariel Flesler’s ScrollTo plugin for jQuery. The first post doesn’t require a plugin so you could add the code to the custom-js.php file and it’ll place the code in the footer for you.

If I can help, just let me know,
Bill

[digitalbum]

Thanks amigo, good imagery is critical for a good website, IMO. Great theme.

Ok Bill, I added the code in your first link to the custom-js.php file, starting with “//scrolling link” :

var $container = jQuery(‘.staff-list ul’);
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : ‘li’,
gutterWidth : 30,
isAnimated : true
});
});

//scrolling link
$(‘a[href^=”#”]’).bind(‘click.smoothscroll’,function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$(‘html, body’).stop().animate({
‘scrollTop’: $target.offset().top
}, 500, ‘swing’, function () {
window.location.hash = target;
});
});

<?php }

And it didn't work, no awesome animated scrolling:(

I know next to nothing about jquery so I'm not surprised, but I thought I followed the instructions correctly.

And I did include a "Menu2" tab that linked to your section2 hashtag so that worked, but again, it's still highlighted blue. No bueno, and looks confusing.

Maybe you're right and having a separate navigation for the homepage is the best option. I like minimalistic websites and I don't see much of a reason for navigating to a separate page to find the menu when there's a perfectly good one, with everything on it right there on the homepage. What's up with all this clicking, I'm starving and I want egg rolls delivered now!

[Bill Robbins]

For the navigation menu highlighting, you have to leave off the URL before the #. Just use the #two and it won’t highlight.

JQuery can be confusing with WordPress. It’s loaded in what’s called “compatibility” mode so that it will more easily play with other libraries like MooTools. The downside of that is that you can’t use “$” as a way to interact with it anymore. So most snippets on the web that aren’t specifically written for WordPress will not work right out of the box.

I feel bad pointing you to two solutions that I haven’t attempted with the site. At the very least you’d have to change that to code to something like this:

jQuery('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
        $target = jQuery(target);
    jQuery('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});

That’s still not something I’ve tested, but It removes “$” from the demo.

---

You can set up an navigation menu just for the home page. Here’s how:

1. Go to the Appearance section and select Edit.
2. From the files on the right, choose functions.php and find this spot:

   
   // This theme uses wp_nav_menu() in three locations.
   			register_nav_menus( array(
   				'primary' => __( 'Primary Navigation', 'organizedthemes' ),
   				'social' => __( 'Social Media Links (footer)', 'organizedthemes' ),
   			) );
   

3. Replace that with this:

   
   		// This theme uses wp_nav_menu() in three locations.
   			register_nav_menus( array(
   				'primary' => __( 'Primary Navigation', 'organizedthemes' ),
   				'social' => __( 'Social Media Links (footer)', 'organizedthemes' ),
   				'home' => __( 'Home Page Navigation', 'organizedthemes' ),
   			) );
   

4. Save your changes.
5. Next choose header.php and find this spot:

   
   		<?php 
   			
   			wp_nav_menu( 
   				array( 
   					'theme_location'	=> 'primary', 
   					'container' 		=> 'nav', 
   					'container_id'		=> 'navigation', 
   					'depth'				=> 3 
   				) 
   			);
   			
   		?>
   

   and replace it with this:

   and save your changes.

That will add a home page only menu location that you can use. On your inside pages you can use the URL plus # to point to the home page menu and on the home page, you can use just the # without the URL too.

If you have any questions, let me know,
Bill

[digitalbum]

Ok, wow, you’re some kind of WordPress superhero. Worked perfectly, thanks Bill!

[Bill Robbins]

Fantastic. If you need anything else, let me know.

Enjoy your weekend,
Bill

[Author]

Posts