Skip to main content
Brand User

634 Messages

 • 

43.7K Points

Wed, Nov 7, 2018 7:00 PM

WebsiteBuilder: Navigation Menu

A navigation menu is crucial to the success of your site. It lets your visitors know what is available on your site, allows them to move throughout your website, and helps search engines crawl all pages you have linked in the menu. 

It is important to keep your menu as uncomplicated and easy to use as possible. It is recommended to have no more than 15 items in your pages menu, because more than that tends to overwhelm a person viewing your site. 

Best practices for navigation menus include putting it toward the top of your pages, keeping the menu in the same place on each page, and making sure the menu is visible on all pages. This will provide the best experience for your visitors. Also, it should take no more than 2-3 clicks for a customer to get somewhere on your site. Making it easier for your customer to navigate your site will make it more likely for them to stay on your site, decreasing the bounce rate.

Basically, the navigation menu is like a map you give customers to help them find what they need on your website. The better you make your map, the easier your visitors will find it to explore the content you provide. 

In Website Builder, there is a category under Elements specifically for Site Navigation:




1) When you choose Menu:

The menu will be attached to your cursor for you to place where you choose to have it on your site. 
Once it is placed, you will see a menu that gives you the option to Manage Pages, along with several other icons. You can see what these icons are for by hovering over them with your mouse. 
To see a more in depth menu, click More > Advanced



A secondary menu will appear on the right with the following options:

  • Manage Pages
  • Menu Layout
  • Change Design
  • Settings
  • Style
  • Size and Position
  • Animations
  • Drop Down Settings



If you click:

Manage Pages- It will open up the Page Settings, and you can edit page names, hide pages, and choose your Home page. Any page you have on your site, unless hidden, will appear as the links for your menu. You cannot link buttons on your menu to 3rd party site links.



Menu Layout- You will be able to choose from a Menu Button, Horizontal Menu, Vertical Menu, or Grid Menu 



Change Design- This will pull up the different types of menu designs you can choose from. This includes bars, buttons, text links, and more. You will just need to choose which design works best with the design of your site. Once you choose one, click Apply in the top right. 

Settings- You can choose what you want to say to indicate more options, whether to show an arrow or not for drop down menus, how many menu items display, and the spacing for your menu items.



Style- This is where you design your menu. Choose the color, background, border, and other style options from this menu. At the top of this menu, there is an option to choose Pages Menu or Button. Once you have designed your menu, click on Button to change the style for the individual links. From this Button section of the Style Menu, you can also edit the different states of the button like Rollover, Selected, and Pressed



Size and Position- This is where you can use Docking. You can Center your menu in that section horizontally or vertically. You can also stretch is horizontally or vertically, or dock it to the left, right, top or bottom of the section. You can also change the size of your navigation menu box from here. 



Animations- This allows you to add effects to your menu like bounce or fly in. 

Drop Down Settings- This will allow you to customize the style and settings for any drop down menus you create.

You create these sub-menus by moving a page underneath another page in the Page Settings. 



**Note- You can only have one Navigation Menu. If you need additional links, you will need to create them manually using buttons. 

2) When you choose Button Menu:

It will appear as a mobile menu icon



3) When you choose Sections Menu:

It will have a menu attached to your cursor that you can place on your page. This will allow customers to navigate to the different sections on the current page. This is especially helpful for very long pages, or pages with a lot of content. You can only have one Navigation Menu for your site, but you can have a different Sections Menu for each page. 



The last two options are fairly self explanatory:
Place a Scroll Top Button to allow visitors to jump to the top of your page.


Place a Scroll Bottom Button to allow visitors to jump to the bottom of your page. 

Responses

53 Messages

 • 

1.1K Points

5 months ago

How do you link a menu button to a SECTION?
Brand User

525 Messages

 • 

37.5K Points

Hello, 

The WB navigation menu can only link to a specific page. Unfortunately, it cannot link to a specif section. To link to a section you can use a button and apply an element behavior to scroll to that section. https://community.homestead.com/homestead/topics/websitebuilder-element-behaviors

53 Messages

 • 

1.1K Points

So if I had 8 Sections on a Page, I'd have to put 8 buttons on the Main Page?   Isn't there any way around that....i.e., to put a single button that expands to 8 buttons to link to the sections?

53 Messages

 • 

1.1K Points

How do you keep a menu or button from scrolling, i.e. so it's stationary?
Brand User

525 Messages

 • 

37.5K Points

To set up a button to go to each section, yes you will need to use an individual button/text for each. Drop down menus are only a feature when using the navigation menu which unfortunately does not work in this circumstance. 
If you have an element scrolling with the page select the element and look under more>advanced>size and position> scrolls with page. Make sure it is not turned on. 

53 Messages

 • 

1.1K Points

5 months ago

It was turned off, BUT, when I just turned it ON, the menu element is stationary and good, doesn't scroll.   Looks like the verbage on this feature is opposite of what it should be, don't you agree?   

This is really an incredible improvement over SB+ but I seem to be running into road blocks everywhere.    I'm using a Sections Menu (one page, 8 sections), but it doesn't show up on the mobile site,   How do you navigate the mobile site without a menu?   How do you work around this?
Brand User

525 Messages

 • 

37.5K Points

Can you provide the website this is set up on, id be happy to take a look and provide a recommendation for a work around. 

53 Messages

 • 

1.1K Points

Thank you.   It's abs2020.homesteadcloud.com.    Also, I'm having trouble copying elements (text) from one page to another.    That can be done can't it?   How?
Brand User

525 Messages

 • 

37.5K Points

Thank you, I did double check and unfortunately the section menu does not function on the mobile site. We have made the team aware of this and will work on a solution. You can however still accomplish this by using a button or text and add a behavior to scroll to the section, this does function properly on the mobile device. 

Text boxes can be copied from one page to another by using the duplicate button.
First duplicate the text box, place it in a header or footer section. Go to the other page and remove it from the header/footer, placing it in the desired spot.  

53 Messages

 • 

1.1K Points

I'm trying to use text as a solution for Section links, but it seems you can't link to a Section from text.....is that right?    Also, the text links don't show up on the mobile site.
Brand User

525 Messages

 • 

37.5K Points

You can add a scroll to behavior to the text that scrolls to (other element) and select the first element in that section. Highlight the word and add the behavior. You may need to add each as its own individual text box but these do work on mobile. 

10 Messages

 • 

360 Points

5 months ago

I have a specific page called "Lease Information".  On this page there is a lot of information regarding certain aspects of lease information, but not enough information for each common subject to have their own page.  However, these subjects are the things that are tenants are always looking for, so in order for them to find them in an easy way, I have each subject listed in a drop-down menu from "Lease Information". I want to link these subjects in my drop-down menu (Leases, Deposit Information, Move-in Procedures, Parent Guarantor, etc.) to the "Lease Information" page. I thought if I unclicked the box that says link to the webpage URL and type in the "Lease Information" page that each subject in my drop-down menu would link to that page, but it won't work.  Suggestions?


Brand User

525 Messages

 • 

37.5K Points

Hello Heather,

I apologize, drop down menus link to pages only, there is not a way to set up drop down menus to go to specific sections on one page.  You can set up buttons or text boxes with a scroll to behavior set up to link to specific sections but it will not be a navigation drop down menu. https://community.homestead.com/homestead/topics/websitebuilder-element-behaviors

53 Messages

 • 

1.1K Points

12 days ago

I'm trying to add a second navigation menu to a page....is this not possible?   The 2nd menu data is pre-populated with the 1st one and can't be changed without changing both menus.
Brand User

525 Messages

 • 

37.5K Points

Hello,

With Websitebuilder, only 1 navigation menu can be created. A second one can be built manually using buttons or text.