WebsiteBuilder: Navigation Menu

  • 1
  • 1
  • Article
  • Updated 5 days ago
  • (Edited)
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. 

Photo of Homestead FAQ

Homestead FAQ, Employee

  • 43,256 Points 20k badge 2x thumb

Posted 1 year ago

  • 1
  • 1
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
How do you link a menu button to a SECTION?
Photo of Michelle C

Michelle C, Employee

  • 24,020 Points 20k badge 2x thumb
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
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
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?
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
How do you keep a menu or button from scrolling, i.e. so it's stationary?
Photo of Michelle C

Michelle C, Employee

  • 24,020 Points 20k badge 2x thumb
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. 
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
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?
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
This may be a redundant, but it appears that using "text" links on the main page or header pointing to Sections may be a good solution, but how do you get those to appear on the mobile site?     I'm at a loss as to how most designers have a full photo as a main page and then navigate to Sections....do they put the image in the header or in the first section?
Photo of Michelle C

Michelle C, Employee

  • 24,020 Points 20k badge 2x thumb
For example ill use a text box that says Home. Add the scroll to behavior





It will show and work on mobile, you can test it in preview mode. 



You can add a section background but that sounds like it may a feature that requires css code access and customization which our builders unfortunately, do not allow. 
Photo of Hal9944

Hal9944

  • 570 Points 500 badge 2x thumb
No, the image I have there now is a background image on a Section.    I looks like I'll have to do a separate text box for each item, but the behavior link does work well, although it still does not show up on the mobile site (??)

Tell, me, is it better to have one page with 8 sections, or 8 pages?   I don't like having a full page header because that forces you to scroll down on every page....am I thinking correctly?
Photo of Michelle C

Michelle C, Employee

  • 24,020 Points 20k badge 2x thumb
I see you have that text box set to scroll with page. You will need to add a duplicate element that does not scroll with the page as this feature does not work on mobile. You can then turn off the starts visible option for that one so you do not see both menus on the desktop site. 
Photo of Michelle C

Michelle C, Employee

  • 24,020 Points 20k badge 2x thumb
There is not a right or wrong way to set up the site. It is preference of what you want your viewers to see when visiting the site. I have seen an equal usage of both some people use sections some use pages. 
Photo of Heather4091

Heather4091

  • 230 Points 100 badge 2x thumb
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?


Photo of Michelle C

Michelle C, Employee

  • 24,470 Points 20k badge 2x thumb
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