'One-pager' sticky shrink nav

This is the same template as I have used for the sharing folder index. I've just taken out the contents and replaced it with something 'general'. I recommend this building block for 'one-page' sites with navigation to the various sections down the page. This because it takes a lot of fiddling with various top paddings to make the sections appear nicely. But of course, it may be used for traditional, from one page to the next kind of navigation too.

If you want to change the height of the header and navigation, just be aware that the fiddling I mentioned above, will be between top paddings on the body, the container 'contents' and the section headers. Just remember to save with different file names as you are experimenting with the fine tuning, so that you don't mess up your work.

I've left the navigation items and section headers as they are on the sharing index. You will have to change them to what you need, and also the ID of each one. If you need more or less nav items, you just duplicate or delete a 'main' container until you've got what you need. I have also built a 'smooth scroll' into this template, and if you want to use it, you need to change the attributes of each menu item to point to the new IDs that you will be using.

I recommend saving this as a template, in order to get the script and css sitting in the page manager. If you want it as a component, select the container 'main-wrapper', but then you need to save the code in the Page manager separately. And you will need to edit out the details you don't want.

Cards

Tulip

Placeholder Picture

The top container uses the class '.card-divider'. Both the image and these paragraphs are wrapped in '.card-section' containers.

Scilla

Placeholder Picture

Spring flowers growing im my garden. The pictures were taken using a macro filter on a small zoom lens.

Narcissus

Placeholder Picture

To make a component, just select the container 'wrapper'. If you want to use the component on a site, please provide your own images.

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Galleries / Slideshows

Placeholder Picture
Mouse over the image!

Other