Botton sticky navigation for apps


(Nextstep) #1

Hello all,

Version 1.0 user, first time poster, Hype is the best!

How can I use the sticky element or some other type of method to hold a bottom navigation in place for an app layout.

See app below for example.

Google Play Link

I have always used the dual iframe type for these simple apps.

Top Hype document holds the header and bottom navigation and an iframe sliding menu.
Bottom iframe Hype menu holds the content.

I want to go with the sticky option below, but am having trouble with the bottom navigation.

.fixed {
	position: fixed !important;
}

(You might be wondering why change something that works (iframe) because it requires separate Hype due to platform differences, iframe scrolling differences, etc, one for Android/iOS. Wanting to go to the same file for both platforms and this will help.)

Thank you.


(Jonathan Deutsch) #2

Your CSS looks fine to me to have a sticky; it might be useful to attach a zip of the .hype document to see what is going wrong. The best guesses blind would be:

  1. Not using fixed as the class name for the element in the Identity Inspector
  2. Not including the CSS in <style></style> tags

(Nextstep) #3

Apologies, I figured it out, between trying to make one version that will work for Android and iOS it got kind hairy.

The iOS scrolling issue with iFrames complicates the issue as does the Android fullscreen video button missing within two iFrames among other things. Managed to find a solution that works with both platforms.

Not a techie, but have managed to make 5 or 6 apps and making about 4 more simple apps.

Here is another app with more than 10,000 downloads.

Bottom line, thank you for an awesome product!!!