Linking from Menu to within the home page

[tom darwin]

Sorry another question!

I am using this as basically a one page theme and will not be linking to many inner pages, except for the full menu.

What I really like about one page themes is when there is a navigation at the top which links to various points on a page. For example the contact menu item will link to the contact section of the homepage.

I understand this can be done by creating HTML anchor tags and I have read this can be done in wordpress also. However, with this theme not actually having a directly editable homepage I am struggling to work out how to do it.

Is there a way to do this? My homepage is going to be very hard to navigate otherwise.

Thanks

[Bill Robbins]

Hello Tom,

Great question. The home page is set up into blocks to help facilitate that. What you’ll need to do is go to the navigation menu builder (Appearance > Menus) in your WordPress dashboard. In the left hand column, there is a spot for links that you can use to create custom links.

Each section of the home page has a unique ID that corresponds to its section. The first is is “one” the second is “two” and so on through seven.

So back in the navigation menu builder, you would create a link that has the URL of

#two

to link to the second home page section. You would place the label that you’d like to have in your menu as the text and add it to your navigation. Once you update your menu you should have a link that takes you to that section of your home page.

That works great as long as you only have a one page website. If you have more than that, you’ll need to make the links like this:

http://yoursite.com#two

So that if someone clicks that link on an inside page, it will take them to the correct spot on your home page.

If you run into trouble, let me know.

Thanks,
Bill

[tom darwin]

Wow what can I say. Amazing support and a brilliant theme.

THanks alot.

[tom darwin]

Update: this works great!

Only slight issue now is that links on the menu bar which link within the page show as a different colour to ones going off the page. This is because the hover colour is also the current page colour.

Is there any way round this or should I just change the hover colour to same as the default nav text colour?

[Bill Robbins]

Hey Tom,

What you might want to do is set separate colors for the current menu item and the hover state. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #navigation li.current-menu-item a {
   	color: #000000;
   }
   
   #header #navigation li a:hover {
   	color: #cccccc;
   }
   

   The top color there #000000 sets the color of the current menu item and the #cccccc sets the hover color. Change those to fit your needs.

3. Update your settings.

See if that won’t help you straighten out the colors there.

Bill

[tom darwin]

Amazing! Thanks.

[Bill Robbins]

Glad that helped out. Have a great Thanksgiving Tom.

[Author]

Posts