How to use NavBar
(→Fixed NavBar) |
m (→NavBar) |
||
| Line 31: | Line 31: | ||
== NavBar == | == NavBar == | ||
| − | + | <html> | |
| + | <div class="row"> | ||
| + | <div class="span8"> | ||
| + | <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> | |
| − | + | <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> | |
| − | However, because the two NavBars share so much in terms of style and design, they compliment each other very well. | + | <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"> | ||
| + | <img src="http://placehold.it/200x200" alt="Place Holder"> | ||
| + | <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption> | ||
| + | </div> | ||
| + | </div> | ||
| + | </html> | ||
---- | ---- | ||
| + | |||
== Customize the Fixed NavBar and NavBar == | == Customize the Fixed NavBar and NavBar == | ||
'''Enable Fixed Navigation Bar''' | '''Enable Fixed Navigation Bar''' | ||
Revision as of 23:43, 10 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.
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.
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. 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 Menu
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.
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!
Quick References: How to Use PageLines Menus