Mac SEO Blog

Creating a navigation menu is one of the core features of most websites, making it easy for website visitors to navigate the pages within the site. EverWeb includes the Navigation Menu widget for just such a task. The widget is extremely customizable as shown in the Navigation section of the Video Tutorials page of EverWeb website. There are also third party Navigation Menu widgets available, e.g. from everwebwidgets.com, if EverWeb’s built in widget does not suit your requirements.

One important requirement when using a navigation menu for many website developers is that it remains at the top of a page whilst the visitor scrolls the page. In this way, the navigation will always be visible.

If you have created a fixed width website (i.e. one that uses a Centered or Left Aligned page layout), check out our Creating a Sticky Navigation Menu video, which shows you how to easily create this effect.

If you have a responsive website and want a sticky navigation, read on…

Set Up: Use a Master Page

It is always recommended that you use Master Pages in your website so that you only need to add your navigation once to your website. Any page using a Master page will inherit its navigation. As EverWeb’s Navigation Menu widget is so customisable, you will only want to set it up once. If you change the style of the Navigation Menu widget at a later date in Master page, all the pages that use the Master Page will be automatically updated. This is a great time saver as you do not have to update every page in your site with the same change.

Creating The Master Page

In this example, start by creating a responsive Master page:

1. Click on the ‘New Master Page’ button in the Master Page section of the Web Page List. This section is colored blue at the top of the Web Page List above the name of your website. If you are using Dark Mode, the area is colored black. If you do not see the ‘New Master Page’ button, drag the splitter bar (the row of dots above the name of your website) down until the button becomes visible.
2. Once you have clicked on the New Master Page button, the Theme Template Chooser will appear. Choose the ‘Responsive Blank’ theme from the list of Theme Templates on the left of the dialog box. Click on the ‘Home’ page style and click ‘Select’ to finish.
3. A blank new Master Page will be added in to the Master Page List. The page will be called ‘Home’, you can rename it as you would any other page in the Web Page List by double clicking on its name, entering a new name, then pressing Enter to finish.
4. You can always check to make sure that you have created a responsive page by checking the Page Layout section of the Page Settings tab in the Inspector Window. I

Adding The Navigation To The Master Page

Now that you have created a Master Page, keep it selected. The next step is to add the Navigation Menu widget to the page.

1. Click on the Widgets tab and drag and drop the Navigation Menu widget on to the page.
2. As this is a responsive page, the widget will automatically display at full width. As this is the first object placed on the page, it will be appear at the top of the page.
3. The Master page footer contains the ‘Made with Love with EverWeb’ image. You can remove this if you do not need it and add your own content if you want.

Making the Navigation Stick

Now that the Navigation Menu widget is in place on the page, it is time to make it stick so that content will be able to scroll underneath the navigation when the page is scrolled.

1. In the Widget Settings of the Navigation Menu widget, tick the ‘Use Background Color’ checkbox and add a background color to the navigation using the ‘Background Color’ color swatch. This step will stop the contents of the page from being visible under the navigation when you scroll the page.
2. Next, go to the Metrics Inspector and make a note of the Height of the Navigation Menu widget, e.g. by default this is usually 50 pixels.
3. In order for the sticky navigation to work, you will need to place a dummy rectangle shape on the page. Create a new rectangle shape using the Shapes button in the Toolbar.
4. The rectangle will be created as a full width object directly below the Navigation Menu widget.
5. Change the color of the shape to match the color of the background of the navigation. To do this go to the Shape Options tab whilst the shape is selected. In the ‘Fill’ section change the color of the ‘Color Fill’ using the color swatch.
6. Next, change the height of the shape so that it is the same as the height of the Navigation Menu widget. To do this, go to the Metrics Inspector and change the Height field in the ‘Size’ section to 50 pixels.
7. Now that the changes to the rectangle are complete, reselect the Navigation Menu widget and go to the Metrics Inspector.
8. Tick the ‘Fixed Position’ box. This will pin the navigation menu widget in place. Leave ‘Relative to browser left’ ticked
9. When you select ‘Fixed Position’ for the Navigation Menu widget, you will notice that the rectangle shape below it slides underneath it. When using Fixed Position on a full width object in a Responsive page, it is as if the object becomes a layer above the page. 
10. As content in responsive pages has to be in continuous sections down the page, we need to fill the space below where the navigation was. If we do not do this, when we use the Master Page on a regular page, part of the regular page content may be obscured underneath the navigation.
11. This is the reason why the dummy rectangle shape is needed and created with the same height as the Navigation Menu widget to fill the gap where the navigation menu would have been if it had not become its own ‘layer’.
12. Finish styling the Navigation Menu widget as you want and add the other objects you want to the Master page as desired.

Finishing Tasks

Once you have finished styling he Master Page

1. Select a regular page in the Web Page List to attach the Master Page to.
2. In the Page Settings tab of the Inspector Window, click on the dropdown menu in the Master Page section and select the Master page that you have just created.
3. The Master Page will be attached to your regular page.
4. Scroll the contents of the page to see them slide under the navigation.
5. Use Preview to test out the sticky responsive navigation.

As this is a responsive page, the navigation will automatically on mobile devices. To display a Hamburger Navigation icon when on using the navigation on mobile pages, select ‘Responsive Navigation Bar’ in the widget settings of the Navigation Menu widget.

Video Walkthrough

You can also enjoy a video walkthrough of this blog post in our YouTube video Responsive Sticky Navigation Menus.

If you have any questions or comments about this blog post, please let us know! We’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter

Instagram