Pure Grids
Stacks Image 8547
Be sure to drag/drop the Pure Core Stack into your stacks editor. This stack enables the use of all Pure Stacks. Do this only once per Stacks page.
1: Styling the Menu
Stacks Image 8761
Before you start styling your menu, I suggest placing your Pure Menu Stack inside of a Pure Grids Stack (For Horizontal Menus). This will give you control over how wide the menu content is by using Pure Grids' "Content Width" option. This will also give you the ability to make your menu "sticky" (Fixed position).

When you add the Pure Menus Stack to your Stacks page it's '
Type' will be set to 'Multi Page'. This menu is automatically made from your sites currently added pages . You can change the'Type' to 'Single Page' if you would like to create a custom single page scrolling menu (See tutorial 3 below). The second option 'Style' 'in the Pure Menus Styles menu lets you chose from a couple of prebuilt menu styles. Cycle through them all till you find one you would like to use. You can then use the 'Align' option to change the alignment of the individual list items.
Left
Right
Center
2: Adding a Logo
Stacks Image 8777
You can add a "Drop Stacks Here" section by checking the "Logo On" checkbox under the Logo menu. Insert a site Title/Logo by using text or and image. The menu's height will now be determined by the height of the Title/Logo. If you would like your top tier menu items to line up with the Title/Logo just change the "Menu Height" option to be equal to the height of the Title/Logo text or image.

In the example image below the logo image height is 78px total (A 58px image height with 10px of padding on top and bottom of the image 58+10+10=78), so I have set the "Menu Height" to equal 78px.
Using "Add Logo" is not recommended when using a vertical menu. It would be more efficient to add an image or text stack above the Pure Menus Stack.
3: Setting up a Single Page Scrolling Menu (Added v.1.2.0)
Stacks Image 16316
The Single Page menu supports up to 7 items (inc. the first or top menu item). First select how many navigation list items you need using the slider. Just like the Multi Page menu you can use the Style, Align, and Menu Height options to change how your menu appears.
4: Advanced Styles (Added v.1.2.0)
Stacks Image 16422
The Single Page menu supports up to 6 items (plus the first or top menu item). First select how many navigation list items you need using the slider. Just like the Multi Page menu you can use the Style, Align, and Menu Height options to change how your menu appears.
Stacks Image 16453
Double click the list items to change their display names.
Stacks Image 16476
Now all you will need to do is drag and drop in some Pure Grids stacks and use the One Page Navigation Settings menu to assign IDs. Selecting 'Top' will give the grid an ID that corresponds with the Top menu item. When users click on the navigation list item, the page will auto scroll to this grid.
Stacks Image 20788

About

Pure for RapidWeaver was created to give RapidWeaver and Stacks users a way to create their own custom designed websites while also making it simple, fun, and extremely fast. In fact, this entire website design was created with it.

Pure for RapidWeaver is a product by 1 Little Designer.
Stacks Image 20803

Latest Releases

Stacks Image 18368
Stacks Image 18241
Stacks Image 21479
Stacks Image 17806
Stacks Image 20808

Email Newsletter

Subscribe to receive updates when new Project Files are released.
© 2016 1LD. RapidWeaver and Pure trademarks and brands are the property of their respective owners and are not affiliated with 1LD.