Homepage navigation

[Birgit Reizevoort]

I set up navigation that lets you jump over the homepage in stead of opening up the WP-page underneath? Basically like anchor links.

[Bill Robbins]

You can do that. In the navigation builder, look in the left hand column for a spot labeled “Custom Link.” In the URL field, delete the http:// first. Then you’ll want to enter something like #one. Each section in the home page has a number you can use to link to it. To link to the first section use #one, for the second #two, for the third #three and so on through seven.

In the label field, enter the text you’d like to have in your navigation bar as your link. Then add it to your menu.

That should do it. If you have any questions or trouble, let me know,
Bill

[Birgit Reizevoort]

Hi Bill,

It worked, but when a item in the navigation bar is clicked, it only shows the image partly, in most cases. How can I get the links to show the full image used?

Thanks!

Birgit

[Bill Robbins]

Birgit,

One thing you might try is to insert the image directly into the content for that section instead of using it as one of the image blocks. That might help a bit.

How much is visible is somewhat a function of the image size vs. the screen size/orientation. If you insert the image directly into the content though, you can place it above the text which should help.

Your site’s looking great by the way. Very creative.

Bill

[Birgit Reizevoort]

Hi Bill,

Thank you for the kind words! Putting a lot of effort into it, couldn’t have done it without your help.

I’m afraid inserting the image in the content did not work… Any other brainwaves?

Thank you!

Birgit

[Bill Robbins]

Birgit,

It may not really be possible. The images are rather tall and since they fit in after the content you’ll only see them on a really tall display. On my 24 inch monitor, only the tops are visible when I click on the link.

You could change the picture block <div> that’s in each section to also include an ID. Something like this:

And then change the navigation link to point directly to the image instead of the section. That would probably give you the best shot.

It’s also possible to add in a media query that’s based on the height of your visitor’s browser. You could place that at the bottom of your style.css file or in the Custom CSS box. It might look like this:

@media only screen and (max-height: 700px) {

	#one .picture-block {
		height: 500px;
		width: auto;
	}

}

That would make the image block in the first section have a maximum height of 500 pixels with the width adjusting to scale.

Personally I have next to no experience using vertical media queries (I mostly use them for width), but that’s a theoretical possibility.

Hope that helps,
Bill

[Author]

Posts