Details-Based Sticky Navigation

Click through to view each sticky nav above as well as information on how to use these on any S1 Generator or S2 Complete Style layout below! You should be able to use these on any pre-existing layout with no problems, but if you have any issues feel free to comment on the original entry and I'll take a look!

CLEAR SELECTION BACK TO ENTRY

Navigation #1

For Generator

Most Generator layouts have a CSS section and four sections for each page view's custom coding. Paste your CSS at the end of your CSS section and then paste the HTML into each area just before or after your existing custom coding. That's it, you're done! Fill in your links and edit colors and fonts to your liking.

The HTML
The CSS


For Complete Style

Complete Style is a little trickier. You MUST be using a layout that uses a base with a sidebar. Paste the CSS at the end of your stylesheet. After this paste your HTML into the first customtext box and save. Make sure your layout doesn't set .module-customtext to display:none; first.

The HTML
The CSS

Navigation #2

For Generator

Most Generator layouts have a CSS section and four sections for each page view's custom coding. Paste your CSS at the end of your CSS section and then paste the HTML into each area just before or after your existing custom coding. That's it, you're done! Fill in your links and edit colors and fonts to your liking.

The HTML
The CSS


For Complete Style

Complete Style is a little trickier. You MUST be using a layout that uses a base with a sidebar. Paste the CSS at the end of your stylesheet. After this paste your HTML into the first customtext box and save. Make sure your layout doesn't set .module-customtext to display:none; first.

The HTML
The CSS

Navigation #3

For Generator

Most Generator layouts have a CSS section and four sections for each page view's custom coding. Paste your CSS at the end of your CSS section and then paste the HTML into each area just before or after your existing custom coding. That's it, you're done! Fill in your links and edit colors and fonts to your liking.

The HTML
The CSS


For Complete Style

Complete Style is a little trickier. You MUST be using a layout that uses a base with a sidebar. Paste the CSS at the end of your stylesheet. After this paste your HTML into the first customtext box and save. Make sure your layout doesn't set .module-customtext to display:none; first.

The HTML
The CSS

Navigation #4

For Generator

Most Generator layouts have a CSS section and four sections for each page view's custom coding. Paste your CSS at the end of your CSS section and then paste the HTML into each area just before or after your existing custom coding. That's it, you're done! Fill in your links and edit colors and fonts to your liking.

The HTML
The CSS


For Complete Style

Complete Style is a little trickier. You MUST be using a layout that uses a base with a sidebar. Paste the CSS at the end of your stylesheet. After this paste your HTML into the first customtext box and save. Make sure your layout doesn't set .module-customtext to display:none; first.

The HTML
The CSS


Notes

The most common problem will likely be that your existing journal content sits too closely to your sticky nav. In this case, the answer will (almost) always be to adjust the top margin of body in your CSS to make room for where the nav is sitting.

Another problem you may encounter is odd whitespace when using this in S2 Complete Style. If this happens, run everything onto one line in the custom text box holding the HTML and the problem should resolve.