Menu icon Foundation
Full size background-image & sticky top-nav

Hi all,

We are busy with a new project and we would like something as http://theringbarlondon.co.uk.

Just the full browser background image and the (sticky) menu.

And later on, we would like a to use a [orbit] slider, so images changes. As per example: http://html.multipixels.net/moodie/

We have tried several things, the menu (magellan) is the simple part, but combing the two together, we can't get it to work. Maybe we have overseen something?

Apparently, when it works with Bootstrap is has to work also in Foundation, not?

We are working with foundation 5.

Thanks,
Max

full sizebackgroundimagestickymenunavtop

Hi all,

We are busy with a new project and we would like something as http://theringbarlondon.co.uk.

Just the full browser background image and the (sticky) menu.

And later on, we would like a to use a [orbit] slider, so images changes. As per example: http://html.multipixels.net/moodie/

We have tried several things, the menu (magellan) is the simple part, but combing the two together, we can't get it to work. Maybe we have overseen something?

Apparently, when it works with Bootstrap is has to work also in Foundation, not?

We are working with foundation 5.

Thanks,
Max

Cole Beck over 4 years ago

To have full-width background images, you just need to create the appropriate content sections and set the background image URL accordingly. Use variations of background-size, attachment, and position to achieve different coverage and scrolling effects.
To achieve what is happening on http://html.multipixels.net/moodie/ you should use the plug-in Sequence JS because that is what they are using, http://www.sequencejs.com/
Also instead of Orbit for whatever purpose use Flexslider: http://www.woothemes.com/flexslider/

Just look at the code for the two sample pages you provided, everything you want to do is there.

Max over 4 years ago

Thanks Cole!

Work in progress!