GLIDE Stack for single page navigation

First of all hello to all forum members.
I am new to rapidweaver and foundry, and at first it was a hard decision either to use foundry, foundation, or uikit.

I am working on a single page website for a construction company.
At first I wanted to use a fixed navigation bar on top of the page, but then I realized that this kind of navigation only works with additional internal pages. Then I discovered the stack MagicGellan from bigwhiteduck. This amazing stack navigates you from the top navigation bar to every navigation section of the single page. The problem is that MagicGellan only works with „foundation“.

Therefore I redesigned the site and now I am using „Glide“ with the navigation bar on the left side of the page. I have to say that I am really (almost) happy with this solution. What I like is that I have space below the navigation bar for additional stacks like images/logos, text and so on.

But now the real problems:

  1. If I am using the „Reveal“ stack in the „Glide Nav Section“ the menu bar is not fixed anymore, and it gets useless, because it scrolls off the screen.

  2. When I for example click the „Glide Nav Item“ # 2 in the navigation bar, the navigation jumps to the top of the „Glide Nav Section“ # 2. Perfect! But when I now scroll down the page and click again to „Glide Nav Item“ # 2 in the navigation bar, because I want get back to the top of the „Glide Nav Section“ # 2, nothing happens. Now for example I have to click first on # 3, then again on # 2, and now the page scrolls back on top of the „Glide Nav Section“ # 2.

  3. On top of the single page is a banner. But it is not possible to navigate with the menu bar „Glide Nav Item“ back to the top of the banner, for example with a Home button.

  4. When using a mobile device, the „Glide“ menu bar is hidden. It is okay when the big menu bar on the left side disappears, but on top of the site there is no small drop down navigation menu anymore. Therefore no navigation on a mobile device is possible.

  5. Another question is about file size of the single page. I want to hide a lot of content like paragraphs (text), images, and projects (text with images) with stacks like „Accordion“ and „Modal“. Does this mean if someone opens the finished single page, that all the content from the single page will automatically load before the page opens. Or will the hidden content only load if opened. The problem with the single page design is that the size of the site will be at least 20 MB or more. If this is true that all content of the single page has to load, then it would be better if I make several internal pages for image galleries and projects.

  6. Is there a possibility to use the stack „Modal“ with just a single image, or a card (a field with text and an image). I have a field with a border, an image of the construction site, and a short text description. When I click on the field a new window opens within the single page with detailed information (text and an image gallery). Right now I only can click on the „Modal“ text-button to open the window, but not on the image.

There are some questions more, for example I can’t find a „Hover“ effect for a single image… but I think it’s already enough right now.

I hope you can give me some hints for my questions.

Thanks!
Harry

This is because the Reveal stack uses some code to make sure that itself, and all of the parent stacks that it is placed within, get the code overflow: visible; appended to them. This allows the animations to fully animate outside of the bounds of these parent level stacks. This also means that the Glide stack doesn’t know which stack to stick to. I can look into adding an extra feature to Reveal to allow compatibility with Glide, but that will hamper the animations a bit, as some animation will then appear to be cropped off. It is a give and take. Do note: There are other stacks in Foundry that also use this same functionality as the Reveal stack as they need their parent stacks to have overflow: visible; enabled as well. Glide was designed for content within a page itself, and wasn’t intended to be the navigation for a whole page. While it can be used for a page’s navigation, it is going to come with caveats.

This is the intended result. You are in section two at the time that you’re clicking the navigation link. The stack is meant to take you to the section you click, and track what section you’re in. While you’re in that section it is not going to take you back to the top of the section.

You could place the banner in its own section, making the banner section number one. I believe this would solve that problem, unless you’re wanting the banner to be full width. If so then what you’re wanting is not an option as the banner is outside of the Glide stack so it has no control over that. Again, Glide is designed to navigate content within a page, and while you can use Glide as a one-page site’s navigation, it is not specifically designed for that purpose. It would be like using a hammer to put a screw into a piece of wood – it may work, but the hammer wasn’t designed for that task and there will be some repercussions because of it.

This is by design so that you have room for your content. Again it is supposed to be used to navigate content within a page and not used as a site’s overall navigation.

Your page should not be 20mb. This tells me you have some problems with your page. You most likely are using images that are far too big or of the wrong resolution for wen design. If you provide a link to your live site I can have a look and see what might be up. Or even better if you post a download link to a ZIP file containing your project file and images I can have a look at those up close.

The Modal stack is not a lightbox, which it sounds like you’re looking for. There is not a lightbox stack in Foundry at this time but you can definitely find a plethora of lightbox stacks on the RapidWeaver Community site.

There is not a stack in Foundry for accomplishing that at this time.

Hello Adam,

thanks a lot for your detailed and helpful answer.
As you can see I am a beginner…
I think I will do a redesign anyway.

[quote]As you can see I am a beginner…
[/quote]

It isn’t really a “beginner” thing in this case, honestly. The details I mentioned about Reveal and such aren’t something anyone but me would realize. Some stacks just won’t work within Glide right now because of this. It isn’t a bug really, but more of a compatibility thing because of the way Glide decides where to “stick.” I’ll look to see if there’s a way around it, but currently Glide is setup so you could have multiple Glide stacks on a page and when the next one gets to the top it would push the first one out of the way.

As for a anchor style navigation – there may be options for something like this in the future. Nothing on the close horizon, but it is on the longer roadmap for Foundry.