How to Create a Website Navigation Bar
Create a navigation bar for seamless website organization
Use iFOLIO's Navigation Bar Editor to create a nav bar linking all your iFOLIO websites into one cohesive web presence. Add your custom domain to manage your entire website through iFOLIO Cloud.
1. The Navigation Bar Editor
2. Designing Your Navigation Bar for a Seamless User Experience
Open the Navigation Bar Editor
Open the iFOLIO Admin panel, and click “Templates” in the top navigation bar. Click the “Nav Bar” tab to open your Navigation Bar templates. Click “Create New” to start a new navigation bar template & open the Navigation Bar Editor. Name your Navigation Bar in the top left corner, and click “Create” to get started editing.
Using the Navigation Bar Editor
The Navigation Bar Editor is split into three main sections, with a preview of the navigation bar at the top.
- Add links, categories, or buttons to your navigation bar structure on the left.
- Control the design, styling, & colors of your navigation bar in the center.
- Preview & modify how your navigation bar will appear on mobile on the right.
- Click the undo/redo buttons in the top bar to undo or redo actions. Your changes will be saved automatically.
Navigation Bar Structure
Click “Add Page” to add a link or category to your navigation bar. Click “Add Button” to add an outlined button to your navigation bar. Name your new button or page, and then click the link icon to the right of the name to optionally link an iFOLIO page, URL, or document.
Re-arrange pages and buttons by clicking & dragging the move icon on the left side. Drag a page underneath another page to create a dropdown category.
Navigation Bar Design
Set colors & styling for your navigation bar.
Nav Bar Colors:
Use the color picker to set colors for your navigation bar.
- Regular: Choose the background color of the navigation bar.
- Hover: Choose the color of the navigation bar items when hovering over the mouse.
- Clicked: Choose the color of the navigation bar items when clicked.
Nav Bar Behavior & Height:
Select whether the navigation bar will stay at the top of the page or remain when a user scrolls down the page, and select the pixel height of the navigation bar.
Logo & Alignment:
Select a logo to appear in the navigation bar and choose which side of the navigation bar your logo will appear on. Choose a transparent logo that will display well horizontally. The logo preview includes the background color of the navigation bar.
Navigation Bar Text
Change the font & font size for your navigation bar text, as well as bold, underline, and italics styling.
Text Colors:
Use the color picker to set colors for your navigation bar.
- Regular: Choose the default color of your nav bar text.
- Hover: Choose the color of the nav bar text on mouse hover. Be sure your text is legible against the Hover color of the navigation bar.
- Click: Choose the color of the nav bar text when clicked. Be sure this color is legible against the Clicked color of the navigation bar.
Text Spacing & Alignment:
Choose how much space will be between items on the navigation bar, and choose if your navigation bar items will be aligned to the left, center, or right of the navigation bar.
Adding your Navigation Bar
Click the “Add to iFOLIO’s” button to attach your navigation bar to your website. Select your website pages from the list of iFOLIO pages, click “Add”, and your nav bar will appear to page visitors.
950 East Paces Ferry Rd NE, Suite 1500, Atlanta, Georgia 30326
Phone: 470 - 223 - 4818, | Email: info@ifoliocloud.com