How to use NavBar
(Difference between revisions)
| Line 8: | Line 8: | ||
== Fixed NavBar == | == Fixed NavBar == | ||
<html> | <html> | ||
| − | <div class="row"> | + | <div class="row"> |
| − | + | <div class="span12"> | |
| − | <strong>What is it?</strong> | + | <strong>What is it?</strong> |
| − | + | </div> | |
| − | </div> | + | </div> |
| − | <div class="row"> | + | <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. | + | 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. |
| − | <br><br> | + | <br><br> |
| − | 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/" alt="3 Elements of Your Website That Matter More Than You Think">click here</a>. | + | 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/" alt="3 Elements of Your Website That Matter More Than You Think">click here</a>. |
| − | + | </div> | |
| − | + | <div class="span4"> | |
| − | + | <img src="http://placehold.it/200x200" alt="Place Holder"> | |
| − | + | <figcaption> | |
| − | + | Placeholder image for ScrollSpy Content sreenshots | |
| − | + | </figcaption> | |
| − | + | </div> | |
| − | </div> | + | </div> |
| − | </div> | + | |
</html> | </html> | ||
---- | ---- | ||
| Line 32: | Line 31: | ||
== NavBar == | == NavBar == | ||
<html> | <html> | ||
| − | <div class="row"> | + | <div class="row"> |
| − | + | <div class="span8"> | |
| − | <strong>What is it?</strong><br> | + | <strong>What is it?</strong><br> |
| − | The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences. | + | The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences. |
| − | <ul> | + | <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>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. | + | <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> |
| − | However, because the two NavBars share so much in terms of style and design, they compliment each other very well.</li> | + | </ul> |
| − | </ul> | + | </div> |
| − | + | <div class="span4"> | |
| − | + | <img src="http://placehold.it/200x200" alt="Place Holder"> | |
| − | + | <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption> | |
| − | + | </div> | |
| − | + | </div> | |
| − | </div> | + | |
</html> | </html> | ||
---- | ---- | ||
| Line 52: | Line 50: | ||
== Customize the Fixed NavBar and NavBar == | == Customize the Fixed NavBar and NavBar == | ||
<html> | <html> | ||
| − | + | <div class="row"> | |
| − | + | <div class="span12"> | |
| − | <strong>Enable Fixed Navigation Bar</strong> | + | <strong>Enable Fixed Navigation Bar</strong> |
| − | <br><br> | + | <br><br> |
| − | 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. | + | 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. |
| − | <br><br> | + | <br><br> |
| − | <strong>Fixed NavBar – NavBar Logo</strong> | + | <strong>Fixed NavBar – NavBar Logo</strong> |
| − | <br><br> | + | <br><br> |
| − | 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. | + | 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 class="alert alert-info"> | |
| − | <strong>Special Notes:</strong> | + | <strong>Special Notes:</strong> |
| − | <ul> | + | <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> | |
| − | </ul> | + | <br> |
| − | + | <strong>NavBar and Fixed NavBar Theme</strong> | |
| − | <br> | + | <br><br> |
| − | <strong>NavBar and Fixed NavBar Theme</strong> | + | 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! |
| − | <br><br> | + | <br><br> |
| − | 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! | + | <strong>NavBar and Fixed NavBar Mene</strong> |
| − | <br><br> | + | <br><br> |
| − | <strong>NavBar and Fixed NavBar Mene</strong> | + | 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. |
| − | <br><br> | + | <br><br> |
| − | 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. | + | <div class="alert alert-info"> |
| − | <br><br> | + | |
| − | + | <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.<br><br> | |
| − | + | If you plan on using both NavBars, it is good practice to use two different menus to avoid navigation redundancy. | |
| − | <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.< | + | </div> |
| − | < | + | </div> |
| − | If you plan on using both NavBars, it is good practice to use two different menus to avoid navigation redundancy.</ | + | </div> |
| − | + | <div class="row"> | |
| − | + | <div class="span12"> | |
| + | <strong>NavBar and Fixed NavBar Configuration Options</strong> | ||
| + | </div> | ||
</div> | </div> | ||
<div class="row"> | <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. | |
| − | + | <br><br> | |
| − | + | <strong>Can Drop-Down Menus Be Used?</strong><br> | |
| − | + | 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. | |
| − | + | <br><br> | |
| − | 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. | + | <div class="alert alert-error"> |
| − | <br><br> | + | <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. |
| − | <strong>Can Drop-Down Menus Be Used?</strong><br> | + | </div> |
| − | 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. | + | <div class="alert alert-info"> |
| − | <br><br> | + | <strong>Tip:</strong> 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 section of PageLines. Doing this will just load extra javascript and slow your page down! |
| − | + | </div> | |
| − | <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. | + | </div> |
| − | + | <div class="span4"> | |
| − | + | <img src="http://placehold.it/200x200" alt="Place Holder"> | |
| − | <strong>Tip:</strong> 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 section of PageLines. Doing this will just load extra javascript and slow your page down! | + | <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption> |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class="row"> | |
| − | + | <div class="span12"> | |
| − | + | <strong>Quick References</strong><br> | |
| − | + | <a href="http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Menus">How to Use PageLines Menus</a> | |
| − | </div> | + | <br> |
| − | + | <a href="http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup">How to Use Template Setup</a> | |
| − | + | </div> | |
| − | <div class="row"> | + | </div> |
| − | + | ||
| − | <strong>Quick References</strong><br> | + | |
| − | <a href="http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Menus">How to Use PageLines Menus</a> | + | |
| − | <br> | + | |
| − | <a href="http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup">How to Use Template Setup</a> | + | |
| − | + | ||
| − | + | ||
| − | </div> | + | |
</html> | </html> | ||
Revision as of 02:16, 11 May 2012
New in PageLines 2.2
Contents |
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.
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.
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.
What is it?
The NavBar is a navigation bar exactly like the Fixed NavBar, with two differences.
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.
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.
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 Mene
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.
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 Mene
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.
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.
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.
Tip: 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 section of PageLines. Doing this will just load extra javascript and slow your page down!