Image
RapidWeaver Theme

Navigator

This responsive, minimal theme has beautiful stylings and a unique navigation system. It comes packed with a large assortment of theme variations and color pickers to help customize it to your liking.

This page outlines the settings included in the Navigator theme and talks about what they do, and how they affect the theme's display and functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the theme, as well as gives you an idea what it can do before purchase. For examples of the theme in action, please visit its product page.


Tutorial Videos

We've created several tutorial videos that walk you through using the major features of the theme. These are a good resource for both before and after your purchase. Watch them now to get an idea of some of the interesting things this theme can do, and follow along with them later after your purchase to help in building your new site.

Navigation
ExtraContent Areas
Banners
Social Badges
Compatibility

What does this do?

Below we'll have a look at what each of the various settings within the Navigator theme can do. This page is good reference both in the event that you get stuck when building your site, as well as to get an idea of what controls and settings exist within the theme before you make your purchase.

Image

Theme Toggles

RESPONSIVE VIDEO EMBEDS
If you're going to be including video embeds from YouTube or Vimeo on your page you'll want to enable this feature. This features applies a bit of javascript code to the page which will make these embeds responsive. The video above covers this setting.

ENABLE PHOTO ALBUM LIGHTBOX
Enabling this feature allows your photo album page images to open in a beautiful pop-up lightbox, further adding to the usefulness of the photo album page that comes with RapidWeaver. The video above covers this setting.

HIDE STIE TITLE & LOGO ABOVE NAVIGATION
Navigator's unique pop-out navigation has the ability to include the Site Title and Logo above the navigation items. You can uses these toggles to hide each of these items independently within that pop-out navigation.

HIDE SLOGAN AT IPHONE WIDTH
Enabling this feature will hide the Site Slogan when the page is viewed at the iPhone, or Mobile, breakpoint. Optionally you can use the Hide Slogan at All Widths feature to do just that, hide the Site Slogan at all breakpoints.

FADE IN BANNER
Enabling this feature causes the banner area to elegantly fade in during page load, proving a nice effect for your visitors.

FADE IN PHOTO ALBUM THUMBNAILS
This feature causes the thumbnail images on your Photo Album pages to fade in one-by-one as the page loads.

HIDE BREADCRUMB
This allows you to hide the Breadcrumb Trail navigation on a page-by-page basis.

SCROLL TO TOP BUTTON
This feature adds a small button to the bottom of the browser window that, when clicked, will take the visitor back to the top of the page.

Image

Site Title & Title Bar

SITE TITLE FONT
We've included several different font choices that can be applied to the Site Title. These fonts pair well with the other fonts within the Navigator theme.

We've also included color pickers for the following items relating to the Site Title:

  • Site Title
  • Site Title Above Navigation

SITE TITLE ALIGNMENT ABOVE NAVIGATION
Allows you to select whether you'd like the Site Title that is found above the pop-out navigation to be aligned to the left, center or right.

TITLE BAR BACKGROUND
We've supplied several presets that you can choose from for the background of the title bar, which appears at the top of the page and houses the navigation toggle and Site Title.

TITLE BAR ELEMENTS ANIMATION
Here you can choose from a few different animation presets for animation the items within the Title Bar during the page load. This can add a nice styling for your page.

Image

Slogan

SLOGAN FONT
Here you'll find a variety of font styles to choose from for your Site Slogan. These have been used for Navigator as they pair well with the other font selections found throughout the other settings in the theme.

You can adjust the following Slogan related colors using included color pickers:

  • Slogan Text

SLOGAN BACKGROUND
We've made it easy to style the background of the Site Slogan through several preset backgrounds.

Additionally you can adjust the Slogan's border color here using the supplied color picker:

  • Slogan Border

SLOGAN ANIMATION
Along with the other animation options we provide, we've also included a selection of preset animation stylings for the Slogan text. These animations are executed during the page load to provide a nice effect for your visitors.

Image

Headers & Body Font

HEADERS FONT
Here you'll find a selection of styles to choose from for your page's Headers. These have been used for Navigator as they pair well with the other font selections found throughout the other settings in the theme.

BODY FONT
Use this font drop down to choose the font face you'd like to apply to the main section of content on your page. Like with the other font pickers, these fonts are all chosen to pair well with the other font selections.

Image

Navigation

NAVIGATION EFFECT
Navigator's pop-out navigation panel can be customized to animated into place through a selection of different animation effects. This setting lets you choose the effect that be matches your site design needs.

NAVIGATION EFFECT SPEED
Here you can fine tune your navigation animation effect by adjusting the speed at which it takes place.

NAVIGATION BACKGROUND & COLORS
Our pop-out navigation for this theme can be styled to your liking to help it fit with the rest of your design aesthetic. Here you can choose from our preset background styles as well as use color pickers to customize the following items if the pop-out navigation:

  • Navigation Text
  • Navigation Text Hover
  • Opener Toggle
  • Closer Toggle
  • Background
  • Backdrop

We look at these settings some more in the Navigation tutorial video above in the upper part of this page.

NAVIGATION TOGGLE LABEL
When enabled a text label will be added to the toggle icon that visitors use to open and close the navigation.

NAVIGATION INSET SHADOW
Adds a subtle inset look to the navigation pop-out using a soft inset shadow.

SOCIAL MEDIA BADGES BELOW NAVIGATION
Enabling this feature will show the social media badges for your site at the bottom of the navigation items within the pop-out.

Image

Content

CONTENT WIDTH
This setting offers up several preset widths that you can apply to the main content section of your page. This allows you to adjust how wide this section is so that it meets the needs of your content.

Image

Banner

Here we can give the page some personality. We can choose from one of the many stock banner images that come built-in to the theme to get up and running with out much work at all. In addition to the stock banners we've also included several slots for custom banner images as well. We cover how to use these in the banners video at the top of this page.

BANNER / CONTENT DIVIDER
Allows you to add a nice looking divider line between your content and the banner. We've provided a color picker here to style this divider line as well.

Image

Sidebar

The RapidWeaver sidebar can be placed on the left or right side of your content. If you're not in need of a sidebar for a page, set this control to Hidden instead.

Image

Logo

LOGO PADDING
The Site Logo that is displayed at the top of the pop-out navigation can also has some padding applied to it to help you style the way it is presented to your visitors. This drop down contains several preset padding sizes.

Image

ExtraContent

EDGE-TO-EDGE TOGGLES
We've provided a toggle for ExtraContent areas 1 through 5 to allow you to force these areas to go edge-to-edge in the browser window, giving them a more modern design layout.

Image

Colors

The Navigation theme comes packed with color pickers for styling your pages. This section of settings contains color pickers for all of the following items in the theme:

  • Content Background
  • Content Text
  • Sidebar Text
  • Content & Sidebar Links
  • Social Badge Foreground
  • Social Badge Background
  • Social Badge Hover Foreground
  • Social Badge HoverBackground
  • ExtraContent One Background
  • ExtraContent One Foreground
  • ExtraContent One Links
  • ExtraContent Two Background
  • ExtraContent Two Foreground
  • ExtraContent Two Links
  • ExtraContent Three Background
  • ExtraContent Three Foreground
  • ExtraContent Three Links
  • ExtraContent Four Backgroubnd
  • ExtraContent Four Foreground
  • ExtraContent Four Links
  • ExtraContent Five Background
  • ExtraContent Five Foreground
  • ExtraContent Five Links
  • ExtraContent Six Background
  • ExtraContent Six Foreground
  • ExtraContent Six Links
  • ExtraContent Seven Foreground
  • ExtraContent Seven Links
  • Blog Archive Borders
  • Footer Foreground
  • Footer Border
  • Breadcrumb Trail Background
  • Breadcrumb Trail Dividers
  • Breadcrumb Trail Links
  • Scroll To Top Button Background
  • Scroll To Top Button Foreground
Image

Social Badge Snippets

You can use some of our pre-defined code snippets to insert Social Media Badges on to your pages. You can check out our Social Badges video for more info.

Badge Snippets Badge Snippets
Image
Twitter

<a class="myBadge twitter" href="#"></a>

Google Plus

<a class="myBadge google-plus" href="#"></a>

Dribbble

<a class="myBadge dribbble" href="#"></a>

Facebook

<a class="myBadge facebook" href="#"></a>

Instagram

<a class="myBadge instagram" href="#"></a>

Github

<a class="myBadge github" href="#"></a>

LinkedIn

<a class="myBadge linkedin" href="#"></a>

Skype

<a class="myBadge skype" href="#"></a>

Tumblr

<a class="myBadge tumblr" href="#"></a>

YouTube

<a class="myBadge youtube" href="#"></a>

Apple

<a class="myBadge apple" href="#"></a>

Windows

<a class="myBadge windows" href="#"></a>

Xing

<a class="myBadge xing" href="#"></a>

Email

<a class="myBadge email" href="#"></a>

Android

<a class="myBadge android" href="#"></a>

Stack Overflow

<a class="myBadge soverflow" href="#"></a>

Pintrest

<a class="myBadge pintrest" href="#"></a>

Dropbox

<a class="myBadge dropbox" href="#"></a>

Behance

<a class="myBadge behance" href="#"></a>

Vine

<a class="myBadge vine" href="#"></a>

RSS

<a class="myBadge rss" href="#"></a>

Comments

<a class="myBadge comments" href="#"></a>

Pencil

<a class="myBadge pencil" href="#"></a>

Sound Cloud

<a class="myBadge soundcloud" href="#"></a>