Pretty Sticky Logo

Sticky navigation jQuery plugin with smart anchor links.

1. Download

Download prettySticky.js and prettySticky.css.

Download Here

2. Setup

Include reference to prettySticky.css within your head tags.

Include reference to the jQuery library, jQuery plugin smooth-scroll.js(optional) and prettySticky.js at the bottom of the HTML page before the body tag, as seen below.

link to jQuery from index.html

For details on smooth-scroll, click here

3. HTML Markup

To properly use prettySticky, setup the usual HTML markup for your navigation. Add as many list items as your page requires. In order for prettySticky.js to work, you must add class="nav" to the li elements and nest the ul inside a div with class="menu" as seen below.

prettySticky is also set up to have a logo appear on the left side of the nav bar on scroll. In order for that to function, include a logo in the nav, nest the logo in its own div and give the logo a class of class="logo", as seen below.

4. CSS

The CSS document includes the styling for your nav menu and everythign you need for prettySticky.js to function, below are the default options you may choose to override in your own stylesheet.

To change the font-size of the list items at the top of the page:

To change the background color of the nav menu and the font-size of the list items on scroll:

To change the size of the logo in the nav menu:

To change the color of the anchor links in the nav menu:

To change the color of the anchor links on hover:

To change the color of the highlighted anchor links when scrolling:

Contact Email Github Twitter