Block Types: Navbar

What is the navbar block? 

The Navbar block type is a navigation bar that can be added to your website. Your company logo, page links, dropdown groups, forms, custom HTML, and a shopping cart can be added to create an easy to maneuver website. The background and link colors of the navigation bar will pulled from the website's theme. 

How to add a Navbar block: 

1. In the the website editor, go to the panel on the left and find Current Page
2. Under Header, click the + icon to the right of the row you wish to add a navbar to.
3. In the Select Block Type pop up window, click on Navbar
4. After you have clicked on the Navbar block, the pop-up window will disappear, and you will see the new block added last in the row under the left panel, and it will be highlighted in blue. 

Watch a video: How to add a navbar block

How edit a navbar block:

1. In the left-hand panel, find the Navbar block
2. Click the pencil icon to the right of Navbar 
3. The Navbar editor window will pop-up
4. Below are the changes that can be made to the navbar block type: 

• Use global navbar:
  The global navbar is a type of navigation that is intended to be used globally on the website

• Custom navbar: 

  The custom navbar is a type of navigation block that could be used secondary to the global navbar on any page, however, it can also be used globally when added to the Header of your website.

• Brand:

  The website "brand" is the logo or company name that the website is form. You can type in your company name as text, or select a logo to display to the far left of the navigation bar.
  
  

• Style: 
  • Normal: The "normal" style will pull the primary navigation styles from the theme selected for the website
  • Inverse: The "inverse" style will change the colors to match the secondary navigation styles within the theme
    • NOTE: not all themes support the "inverse" style. 

• Navbar Content: Add content to the right or left side of your navigation bar.
  • + Link: Add a link or page from your library to the navigation bar
  • + Group: Add a dropdown group, then add links to the group by clicking the "+" icon to the right of the group label. 
  • + Custom HTML: Add your own html & styling to the navigation bar. (advanced functionality, requires prior html, CSS, Javascript experience.)
  • + Search Form: Add a search bar and select the catalog that the search is to look through.
  • + Login & Cart Bar: The login & cart bar can be added to the navigation to allow your customers an easy to find login or cart location.
  • Edit Visibility: Change what shows up on each screen size on your navigation. Click this will show the different screen size icons below each content type added to your navigation bar.

• Delete block: 
  • The red box with a trash icon in the bottom left corner of the window will delete the block altogether. 
    
    
• Done:
  • Click Done to close the block editor. Please note, you will need to click Save in the website editor to save the changes made to the block.