Add an intuitive navigation widget to your website

Karen Sahakyan avatar
Written by Karen Sahakyan
Updated over a week ago

Once you've created a good-looking website with different pages, you need to make it really easy and seamless for your visitors navigate through them, right?

Here's a quick overview of the Pages Element, that will enable adding Pages and managing the navigation on your site. 

To get started, go to Elements Section and drag and drop the ‘Pages’ icon to the Crafting Area.
Now you can start selecting the pages that you want to be visible on your site menu.
Once the pages are added, click on and you'll be navigated there to further edit it.

Settings - There are two ways to modify the mode of your navigation bar.
You can either set it to Standard or Burger, along with the Layout: Vertical or Horizontal.

In this section, you may also enable certain options for your navigation, including:

  • Stretching Labels

  • Showing Sub Pages

  • Sub Page Collapse

  • Showing Home Page. 

Just make use of the switchers to achieve the desired result.

In addition, you can also set your subpage dropdowns to open On Click or On Hover.

Burger Menu
Wanna design the Burger icon in away so that it's unique, stands out and is noticeable to your site visitors? Here's how!

To start, click on your Burger Menu Edit Page → Burger Menu Settings.

You'll first be given the option to find the perfect icon. Just type in related niches in the search field, scroll down and you'll see all the available options.

Once you’re happy with the icon of choice, customize it further by, for example, changing its size and even use the color tool to make it more colorful!

FYI, the system automatically generates a dropdown menu for your Website on Mobile view as the best scenario for mobile navigation is to use a so-called burger menu.

If you want to customize the design and style of the Navigation bar specifically for Mobile version, first you'll need to make changes on your Desktop.

To do so:

  1. Change your Menu type from Standard to Burger from Page Settings → Layout Settings.

  2. Customize Burgers Design by clicking on Burger Settings → Edit Page Styles.

  3. After, just set it back to Standard.

!Note: The latter one allows your burger menu to appear only on mobile version, while all style changes will be still saved. 

Styles - What about changing the way your navigation looks on your pages?
Simply go to Style Settings in order to set the Label Font, Size, Weight, Distancesand more for the pages and subpages. You also have the option change the Colorsand Shadows for things like page labels, active or on hover, etc.

Feel free to play with colors using the Colors Tool.

Alignment - You may not like how your Page Element is positioned on the page, never mind. All you need to do is click on the ‘Alignment’ icon to fix this.

Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the Visibility of the elements on your page.

Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Mind the Session visibility as well. The latter one, allows to make certain elements visible only to the logged in users of your website. This can come in handy if you want to hide some content from users until they sign up to your website.

Trash Icon - If for some reason you want to remove your navigation bar, click the ‘Trash’ button and hit ‘Delete’ to confirm your action.

For more insight on managing the pages of your website, check out the Pages App on your Dashboard and make your pages and navigation match your expectations perfectly.

As you're reading this, our enthusiastic team is already working on implementing new elements and functionalities, stay tuned!

Don't miss these helpful Articles either for a bigger view at SpringBuilder and the opportunities available! Always know we're just a step away so hit the Chat box in the lower right corner if you have any questions! 

Did this answer your question?