How can we achieve this top-bar effect?

[dfill]

Effect here: http://weareadaptable.com/

• No background colour, overlays the image
• Hidden when scrolling down; when scrolled up, appears.
• When scrolled up, has a solid background color.

Any help would be greatly appreciated!

[FlatspinZA]

Set the opacity of your top-bar background to 100%, and then use a SASS lightness directive for your text.

As for controlling the visibility of the top-bar when scrolling, you can use Waypoints

https://github.com/imakewebthings/waypoints

It has all sorts of triggers, you just need to define them.

[FlatspinZA]

Not sure, but I think you might also need this:

https://github.com/daneden/animate.css

I am getting old, the memory is bit dodgy.

[dfill]

Hi @FlatspinZA, thank you for your response!

Do you know specifically in _settings.scss where one would set the opacity for my top-bar background to 100%? As well how to use a SSS lightness directive for navigation text?

I will look into the waypoints and animate.css too!

[olefredrik]

Please use the official zurb foundation docs for any questions related to styling:
http://foundation.zurb.com/docs/components/topbar.html