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.
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.
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.
RESPONSIVE VIDEO EMBEDS
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.
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.
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 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.
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:
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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:
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.
<a class="myBadge twitter" href="#"></a>
<a class="myBadge google-plus" href="#"></a>
<a class="myBadge dribbble" href="#"></a>
<a class="myBadge facebook" href="#"></a>
<a class="myBadge instagram" href="#"></a>
<a class="myBadge github" href="#"></a>
<a class="myBadge linkedin" href="#"></a>
<a class="myBadge skype" href="#"></a>
<a class="myBadge tumblr" href="#"></a>
<a class="myBadge youtube" href="#"></a>
<a class="myBadge apple" href="#"></a>
<a class="myBadge windows" href="#"></a>
<a class="myBadge xing" href="#"></a>
<a class="myBadge email" href="#"></a>
<a class="myBadge android" href="#"></a>
<a class="myBadge soverflow" href="#"></a>
<a class="myBadge pintrest" href="#"></a>
<a class="myBadge dropbox" href="#"></a>
<a class="myBadge behance" href="#"></a>
<a class="myBadge vine" href="#"></a>
<a class="myBadge rss" href="#"></a>
<a class="myBadge comments" href="#"></a>
<a class="myBadge pencil" href="#"></a>
<a class="myBadge soundcloud" href="#"></a>