Tip for creating one-page horizontal navigation

Foundry
1

Hello All,

I’ve noticed that other users have also had the need for a horizontal navigation bar for a one-page site and since I figured it was time I contributed something useful instead of bugging Adam with stupid issues, here goes! :smile:

I was looking for a solution to implementing a horizontal navigation bar on a one-pager. None of the default stacks fit the bill and since I couldn’t find a Third-party stack that does what I want, I had to find my own solution. This is what I came up with.

Components used:

  • Foundry sticky content stack
  • Foundry 2-column stack
  • Foundry linked list stack
  • [OPTIONAL] Foundry Vertical Center stack
  • Joe Workman’s free CSS Box stack (or you could use an HTML stack with the anchor text)

Method:
I created the navigation bar by combining the sticky content, column and linked list stacks. In my case, I also used the Foundry vertical centring stack to align the logo and navigation links but that is optional. Here is a screenshot of the… erm, stack stack.

Screen Shot 2016-11-13 at 08.59.15.png894×304 24.9 KB

Next, I assigned the links to the anchors to the linked list items using the format “#top”, “#middle” etc.

Then I placed the CSS Box stack above the container which holds the content I wish to link to. You may need to play around with the top padding of the container stack to get the anchor to be positioned nicely when the anchor content is navigated to. I found that using this stack made it easier to position the anchor correctly compared to using an HTML stack but go with whatever option works better for you.

Screen Shot 2016-11-13 at 08.59.25.png897×112 7.17 KB

Lastly, I assigned a unique ID to the CSS Box stack that mirrored the link I used in the linked list links e.g. #top or #3steps.

Et voilà! Clicking on a link in the custom “navbar” slides down smoothly to the page section targeted.

One drawback is that you need to use custom CSS to style the navbar links (something I think Adam frowns upon as it can break the page if you do it incorrectly). This may not be the most elegant solution but it works perfectly for me. If you can show me a more elegant solution to achieve this I’d be very grateful.

Cheers,
Beem

5 Likes
2

You should post a project file with this setup, using the HTML stack for the anchors, so people can see it in action. I have some anchor-based navigation solutions on the Foundry roadmap but for now this might be a solution people could use.

3 Likes
3

Thanks for the suggestion, @elixirgraphics.

Here is a Dropbox link to a quick test project that uses the HTML stack with a <div id> tag.

Cheers,
Beem

1 Like
4

The is looking good. :+1:

1 Like
5

Thanks Adam. I’m trying to figure out the best way to create a mobile friendly version of this, any suggestions?

Cheers,
Beem

6

I don’t know that there’s a great way without creating two separate navigations and hiding them at different breakpoints using the Visibility stack.

2 Likes
7

Thanks Adam, that’s what I opted for.

8

Hi @Beemerang - I’m trying to create the exact same. Is there any I can check out your example file as it looks like it has gone? I’ve been trying but can’t do it and it’s driving me mad. Many thanks, Paul

9

Hi @labanbrown,

I’d be happy to share an example file with you. Unfortunately, the example I posted has been developed into a full client site so I can’t really share that but if you give me a couple of hours (I’m working on a client deadline at the moment) I’d be happy to throw another one together for you?

Cheers,
Beem

1 Like
10

Hi @Beemerang That would be amazing! Thanks for coming back to quickly on this. It has been driving me mad!

2 Likes
11

Anytime @labanbrown, here is a link to the demo file in a zipped format. Adam, I don’t seem to be able to edit the post in which I originally posted the demo link so I’ll post it again here?

Cheers,
Beem

1 Like
12

Superstar @Beemerang - I’ll check that out now. Thanks for that.

1 Like
13

@Beemerang That works a treat! Thanks for sharing.

Cheers, Paul

1 Like
14

You’re welcome, Paul. Glad I could help.

Cheers,
Beem

15

The ability to edit posts expires after a period of time. No re-writing histories in 1984-esque style around here. :wink:

In all seriousness it is just how the forum software works, which is by design.

1 Like
16

I THOUGHT Big Brother had something to do with it! :smile:

Thanks Adam.