Docs

How to use NavBar

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
m
m
 
(32 intermediate revisions by one user not shown)
Line 1: Line 1:
−
 
+
<html>
−
== Fixed NavBar & NavBar ==
+
<div class="row">
−
In PageLines Framework 2.2, we have added two new features that can be found in PageLine's Settings menu, under the '''NavBar''' sub menu. One is referred to as '''Fixed NavBar''' and the other as simply '''NavBar'''.  While both of these elements can appear in the "Header" template area, only the '''NavBar''' is Drag and Drop capable.
+
<div class="span12">
−
[[File:NavBars.png|center|frameless|900px|alt="FixedNavBar, BrandNav and NavBar screecast"]]
+
<div class="page-header">
−
== Fixed NavBar ==
+
<h1>Fixed NavBar & NavBar
−
'''What is it?''' <br>
+
<small>Responsive and Sticky</small>
−
 
+
</h1>
−
[[File:Fixednavbar.jpg|thumb|frameless|Example of Fixed NavBar in a blog post]]
+
</div>
−
This navigation bar is a powerful way to keep your site's visitors on the map, while still maintaining your brand or concept even as they scroll through your content.  Just as the name suggests, the Fixed NavBar travels with the user's scrollbar.  With the Fixed NavBar, you can rest assured that your visitors attention is directed toward your content.  For more information on focusing your user's attention, [http://www.pagelines.com/3-elements-of-your-website-that-matter-more-than-you-think/ click here].
+
</div>
−
----
+
</div>
−
 
+
<div class="row">
−
== NavBar ==
+
<div class="span7">
−
'''What is it?'''<br>
+
<a class="btn btn-danger" href="#">New in PageLines 2.2</a>
−
The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences.
+
<ul class="thumbnails unstyled">
−
*It is not fixed to the top of your browser window, meaning you can place it anywhere in your header template in the Drag and Drop menu of PageLines.
+
<li class="span7">
−
*There is no room for a logo in the NavBar.
+
<div class="thumbnail">
−
However, because the two NavBars share so much in terms of style and design, they compliment each other very well.
+
<a href="#">
−
----
+
        <img class="pl-imageframe" src="http://placehold.it/300x250" alt="Place Holder">
−
== Customize the Fixed NavBar and NavBar ==
+
        </a>
−
'''Enable Fixed Navigation Bar'''
+
        <div class="caption" style="text-align:center;">
−
 
+
        <p>Placeholder image for NavBar Content Image</p>
−
Here is the check box that enables or disables the Fixed Navigation Bar.  Once checked, it will automatically be added to the top of your site.
+
        </div>
−
 
+
        </div>
−
'''Fixed NavBar – NavBar Logo'''
+
        </li>
−
 
+
        </ul>   
−
Here you have the option to upload a logo that will appear left aligned in your Fixed NavBar.  If you choose not to use a logo image, the default Site Title will be displayed instead.
+
        </div>   
−
'''Special Notes:'''
+
<div class="span5">
−
*This logo will only be visible in Fixed Mode.(Available in Settings :: Color Control)
+
<div style="padding:10px;
−
*The maximum image height accept is 29 pixels.
+
background-color: transparent;
−
 
+
border-radius: 5px;
−
'''NavBar and Fixed NavBar Theme'''
+
-moz-border-radius: 5px;
−
 
+
-moz-box-shadow: 0 0 5px #AAAAAA;
−
The two NavBars come with 5 selectable themes.  These themes control the background color of the bar, and text color of the menu inside the bar.  This allows you to adapt the NavBars graciously to fit into nearly every design, and you have the ability to select them independently!
+
-webkit-box-shadow: 0 0 6px #AAAAAA;
−
 
+
box-shadow: 0 0 6px #AAAAAA;">
−
'''NavBar and Fixed NavBar Menu'''
+
        <ul class="nav nav-list unstyled">
−
 
+
          <li class="nav-header">Other New Features</li>
−
The NavBar and Fixed NavBar use the [http://codex.wordpress.org/WordPress_Menu_User_Guide Wordpress Menu System], just like the Nav Classic and BrandNav sections that existed in previous versions of PageLines Framework.  In this section, you can select which menu you would like to use for each navigation bar.   
+
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_the_Grid">How to Use the Grid</a></li>
−
 
+
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_Intro_Unit">Intro Unit</a></li>
−
<blockquote>'''Tip:''' This option is extremely useful when you want to highlight new or different content on your site.  Just create a menu tailored to that content, and select it from the drop down list in the appropriate NavBar.
+
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_Masthead">Masthead</a></li>
−
 
+
          <li><a href="http://www.pagelines.com/wiki/Bootstrap_Shortcodes_System">Bootstrap Shortcode System</a></li>
−
If you plan on using both NavBars, it is good practice to use two different menus to avoid navigation redundancy.</blockquote>
+
          <li><a href="http://www.pagelines.com/wiki/Introducing_PageLESS">PageLESS CSS</a></li>
−
*Fixed NavBar – Select Menu
+
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_ScrollSpy">ScrollSpy</a></li>
−
*Standard NavBar – Select Menu
+
          <li class="active"><a href="#">NavBar</a></li>
−
 
+
          <li class="divider"></li>
−
'''NavBar and Fixed NavBar Configuration Options'''
+
          <li><a href="#">Help</a></li>
−
 
+
        </ul>
−
The Fixed NavBar and NavBar contain the same exact features, with the one difference we have already explained.  In this section, you can select which elements you’d like displayed, and determine the text alignment of your chosen menu.  
+
        </div>
−
 
+
        </div>
−
*Fixed NavBar – Align Menu Right? (Defaults Left)
+
</div>
−
*Fixed NavBar – Hide Search Form?
+
<div class="row">
−
*Standard NavBar – Align Menu Right? (Defaults left)
+
<div class="span12">
−
*Standard NavBar – Hide Search Form?
+
In PageLines Framework 2.2, we have added two new features that can be found in PageLine's Settings menu, under the <strong>NavBar</strong> sub menu.
 +
<p>One is referred to as <strong>Fixed NavBar</strong> and the other as simply <strong>NavBar</strong>.  While both of these elements can appear in the "Header" template area, only the <strong>NavBar</strong> is Drag and Drop capable.</p>
 +
<a href="http://www.pagelines.com/wiki/images/c/c9/NavBars.png"><img class="pl-imageframe" src="http://www.pagelines.com/wiki/images/thumb/c/c9/NavBars.png/900px-NavBars.png" alt="Fixed and Responsive NavBars"></a>
 +
</div>
 +
</div> 
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>Fixed NavBar
 +
<small>What is it?</small>
 +
</h1>
 +
</div>
 +
  </div>
 +
</div>
 +
<div class="row">
 +
  <div class="span8">
 +
This navigation bar is a powerful way to keep your site's visitors on the map, while still maintaining your <em>brand</em> or <em>concept</em> even as they scroll through your content.   
 +
<p>Just as the name suggests, the Fixed NavBar travels with the user's scrollbar.  With the Fixed NavBar, you can rest assured that your visitors attention is directed toward your content.  For more information on focusing your user's attention, <a href="http://www.pagelines.com/3-elements-of-your-website-that-matter-more-than-you-think/">click here</a>.</p>
 +
</div>
 +
<div class="span4">
 +
<ul class="thumbnails unstyled">
 +
<li class="span5">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        </ul>       
 +
  </div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>NavBar
 +
<small>What is it?</small>
 +
</h1>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="span8">
 +
The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences.
 +
<ul>
 +
<li>It is not fixed to the top of your browser window, meaning you can place it anywhere in your header template in the Drag and Drop menu of PageLines.</li>
 +
<li>There is no room for a logo in the NavBar. However, because the two NavBars share so much in terms of style and design, they compliment each other very well.</li>
 +
</ul>
 +
</div>
 +
<div class="span4">
 +
<ul class="thumbnails unstyled">
 +
<li class="span4">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        </ul>       
 +
  </div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>Customize the Fixed NavBar and NavBar</h1>
 +
</div>
 +
<h2>Enable Fixed Navigation Bar</h2>
 +
<p>Here is the check box that enables or disables the Fixed Navigation Bar.  Once checked, it will automatically be added to the top of your site.</p>
 +
<h2>Fixed NavBar – NavBar Logo</h2>
 +
<p>Here you have the option to upload a logo that will appear left aligned in your Fixed NavBar.  If you choose not to use a logo image, the default Site Title will be displayed instead.</p>
 +
    <div class="alert alert-info">
 +
<strong>Special Notes:</strong>
 +
<ul>
 +
<li>This logo will only be visible in Fixed Mode.(Available in <a href="http://www.pagelines.com/wiki/How_to_Use_the_Color_Control_Settings">Settings - Color Control</a>)</li>
 +
  <li>The maximum image height accept is <strong>29 pixels</strong></li>
 +
</ul>
 +
    </div>
 +
<h2>NavBar and Fixed NavBar Theme</h2>
 +
<p>The two NavBars come with 5 selectable themes.  These themes control the background color of the bar, and text color of the menu inside the bar.  This allows you to adapt the NavBars graciously to fit into nearly every design, and you have the ability to select them independently!</p>
 +
<h2>NavBar and Fixed NavBar Menus</h2>
 +
<p>The NavBar and Fixed NavBar use the <a href="http://codex.wordpress.org/WordPress_Menu_User_Guide">Wordpress Menu System</a>, just like the Nav Classic and <a href="http://www.pagelines.com/wiki/Glossary#BrandNav_Section">BrandNav</a> sections that existed in previous versions of PageLines Framework.  In this section, you can select which menu you would like to use for each navigation bar.</p>  
 +
<div class="alert alert-info">
 +
<p><strong>Tip:</strong> This option is extremely useful when you want to highlight new or different content on your site.  Just create a menu tailored to that content, and select it from the drop down list in the appropriate NavBar. If you plan on using both NavBars, it is good practice to use two different menus to avoid navigation redundancy.
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>NavBar and Fixed NavBar Configuration Options</h1>
 +
</div>
 +
      </div>
 +
    </div>
 +
    <div class="row">
 +
<div class="span8">
 +
The Fixed NavBar and NavBar contain the same exact features, with the one difference we have already explained.  In this section, you can select which elements you’d like displayed, and determine the text alignment of each menu.
 +
<h2>Can Drop-Down Menus Be Used?</h2>
 +
<p>Yes!  The only step you need to follow to enable drop down menus in the new NavBars is indent the menu items you want in your drop-down menu.</p>
 +
<div class="alert alert-error">
 +
<p><strong>Important:</strong> If you utilize the drop-down capability in the NavBar and Fixed NavBar, remember that the first Menu Item is not a link, and only serves as a label.</p>
 +
</div>
 +
<div class="alert alert-info">
 +
<p>If you do not use the NavClassic or <a href="http://www.pagelines.com/wiki/Glossary#BrandNav_Section">BrandNav</a>, it is not necessary to enable the Nav Classic & BrandNav Section - Drop Down Handling features in the <a href="http://www.pagelines.com/wiki/How_to_Use_the_Header_and_Footer_Settings">Header and Footer</a> menu in PageLines.  Doing this will just load extra javascript and slow your page down!</p>
 +
  </div>
 +
</div>
 +
<div class="span4">
 +
<ul class="thumbnails unstyled">
 +
<li class="span4">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        <li class="span4">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        </ul>       
 +
  </div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<h2>Quick References</h2>
 +
<ul>
 +
<li><a href="http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Menus">How to Use PageLines Menus</a></li>
 +
<li><a href="http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup">How to Use Template Setup</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</html>

Latest revision as of 03:36, 16 May 2012

Fixed NavBar & NavBar Responsive and Sticky

New in PageLines 2.2
  • Place Holder

    Placeholder image for NavBar Content Image

In PageLines Framework 2.2, we have added two new features that can be found in PageLine's Settings menu, under the NavBar sub menu.

One is referred to as Fixed NavBar and the other as simply NavBar. While both of these elements can appear in the "Header" template area, only the NavBar is Drag and Drop capable.

Fixed and Responsive NavBars

Fixed NavBar What is it?

This navigation bar is a powerful way to keep your site's visitors on the map, while still maintaining your brand or concept even as they scroll through your content.

Just as the name suggests, the Fixed NavBar travels with the user's scrollbar. With the Fixed NavBar, you can rest assured that your visitors attention is directed toward your content. For more information on focusing your user's attention, click here.

  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

NavBar What is it?

The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences.
  • It is not fixed to the top of your browser window, meaning you can place it anywhere in your header template in the Drag and Drop menu of PageLines.
  • There is no room for a logo in the NavBar. However, because the two NavBars share so much in terms of style and design, they compliment each other very well.
  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

Customize the Fixed NavBar and NavBar

Enable Fixed Navigation Bar

Here is the check box that enables or disables the Fixed Navigation Bar. Once checked, it will automatically be added to the top of your site.

Fixed NavBar – NavBar Logo

Here you have the option to upload a logo that will appear left aligned in your Fixed NavBar. If you choose not to use a logo image, the default Site Title will be displayed instead.

Special Notes:
  • This logo will only be visible in Fixed Mode.(Available in Settings - Color Control)
  • The maximum image height accept is 29 pixels

NavBar and Fixed NavBar Theme

The two NavBars come with 5 selectable themes. These themes control the background color of the bar, and text color of the menu inside the bar. This allows you to adapt the NavBars graciously to fit into nearly every design, and you have the ability to select them independently!

NavBar and Fixed NavBar Menus

The NavBar and Fixed NavBar use the Wordpress Menu System, just like the Nav Classic and BrandNav sections that existed in previous versions of PageLines Framework. In this section, you can select which menu you would like to use for each navigation bar.

Tip: This option is extremely useful when you want to highlight new or different content on your site. Just create a menu tailored to that content, and select it from the drop down list in the appropriate NavBar. If you plan on using both NavBars, it is good practice to use two different menus to avoid navigation redundancy.

NavBar and Fixed NavBar Configuration Options

The Fixed NavBar and NavBar contain the same exact features, with the one difference we have already explained. In this section, you can select which elements you’d like displayed, and determine the text alignment of each menu.

Can Drop-Down Menus Be Used?

Yes! The only step you need to follow to enable drop down menus in the new NavBars is indent the menu items you want in your drop-down menu.

Important: If you utilize the drop-down capability in the NavBar and Fixed NavBar, remember that the first Menu Item is not a link, and only serves as a label.

If you do not use the NavClassic or BrandNav, it is not necessary to enable the Nav Classic & BrandNav Section - Drop Down Handling features in the Header and Footer menu in PageLines. Doing this will just load extra javascript and slow your page down!

  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

Quick References

Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_use_NavBar&oldid=5299"