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!
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.
- 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)
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.
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.
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.