I’m building a one page site, and have been using the Sections stack in Foundry. It’s really nice and makes things pretty easy to do. I’ve run into a couple issues, though:
I’m using “Enable Navigation Items” to make it look like a traditional website with a navigation menu. The stack gives you the option of placing the menu on the Left or Right. Is there any way to place it in the center? Some CSS I might be able to use?
Is it possible to get a footer that goes edge to edge? I want the footer to be a different color than the section above it, but can’t figure out how to accomplish this. If I just make a footer and put it outside the “Section” stack, it isn’t viewable when scrolling down to the bottom of the site. If I make it its own section, then it appears in the navigation.
Once the site is published, the sections are distinguished from one another in the URL in a browser by adding a “/#anchor1” or “/#anchor4” or whatever. Is there any way to change this naming scheme? I’d like it to say the title of the section instead (e.g., “/contact”).
I’m beginning to notice that this might not be the best method for a one page site if the content of the sections increases beyond screen height. For instance, putting a blog in one of the sections. Has anyone else found that to be problematic?
OK, I think those are all the questions I’ve got. For now.
Thanks, everyone. Adam, this a great stack and a great method to create a one page site!
No, that isn’t a feature of the stack. You could write some of your own custom CSS using CSS transforms to get what you’re after perhaps, and then insert your custom code into the custom CSS pane in the Page Inspector.
The anchors are programmatically created so as to make sure no two sections have the same anchor name, which would lead to problems.
Sections is for a very specific sort of page. A normal one-page site is probably better built using the Mega Menu stack and its anchor links. You’ll have a great deal more freedom in your design. I always prefer and recommend Mega Menu over Sections for a one-page site. Sections is nice, but it is definitely more niche.
I have a hero banner set up at the top with a fullscreen image (like sort of a “splash” page). I’m calling that anchor “home,” so a viewer can return to it easily if they want to. The anchor is set up correctly as far as I can tell, but upon clicking “home” in the menu, it won’t scroll up all the way. It stops at the next anchor point and doesn’t go further.
All my other anchor points are working perfectly. (I’ve got 4 other anchors.)
That’s not going to work with a hero banner due to the way the hero banner gets placed in the markup. Personally I’d just use a banner with fluid height and nicely pad it our using the padding option in the Margins stack.
