Creating an easy way to navigate the pages of your EverWeb designed website is an essential task when building your site. This is typically when EverWeb’s built-in Navigation Menu widget comes to mind. The widget is incredibly versatile with plenty of options available to make the navigation that you want. If the widget is not what you’re looking for, there are third party navigation menu widgets available, such as those from Roddy MaKay’s EverWeb Widgets site.
When developing a website, typically designers place the navigation at the top of the page and then want the page contents to slide beneath the navigation as the visitor to the page scrolls up and down the page. In this article, I am going to look at how you can successfully build a navigation like this whether you are building a fixed width or responsive website. Remember that it’s always best to use a Master Page so that you only need to add the navigation once and all pages using the Master page will then inherit the navigation. Let’s start with a fixed width website.
Creating a Sticky Navigation Header for a Fixed Width Page
- Create a fixed Width (Master) page, for example, a blank page.
- Go to the Widgets tab and add the Navigation Menu widget to the Header of the page. If you drop the widget in to the wrong section of the page, for example in to the body area, hold the Cmd key down whilst drag and dropping the widget in to the Header section of the page.
- Go to the Metrics Inspector and make the widget ‘Full Width’
- Also in the Metics Inspector check the ‘Fixed Position’ option. Leave the ‘Relative to Left’ option checked.
- In the Widget Settings, click on the option to ‘Use Background Color’
- Set the color of the Navigation Menu widget
- Style the Navigation Menu widget as desired and complete the contents of your page.
Testing and Troubleshooting Your Sticky Fixed Width Navigation
The menu is all set. Use EverWeb’s Preview button to test your navigation. As you scroll the page the items below the navigation should slide under it. If you find that objects appear on top of the navigation, select the Navigation Menu widget again. Go to the Metrics inspector and check the ‘Always on Top’ option. In addition you may also need to use the Arrange-> Bring to Front menu option to make sure that the Navigation Menu widget is always the object on top of all others.
Creating a Sticky Navigation for a Responsive Page
- Create a responsive (Master) page, for example a responsive blank page.
- Add the Navigation Menu widget to the page. It will automatically be full width.
- Go to the Widget Settings and add a background color to the navigation. This will stop the page contents from being visible behind the Navigation Menu widget when you scroll the page.
- Next, go to the Metrics Inspector and note the Height of the Navigation Menu widget, e.g. 50 pixels. We will be using this value later.
- In order for the sticky navigation to work, you will need to place a dummy rectangle shape on the page.
- To do this, create a new rectangle shape using the Shapes button in the Toolbar. The shape will sit directly below the Navigation Menu widget.
- Use the Fill section of the Shape Options tab to change the color of the rectangle shape to be the same color the background of the Navigation Menu widget.
- Set the Height of the shape to be the same as the Height of the Navigation Menu widget, in this example, 50 pixels.
- Now reselect the Navigation Menu widget and go to the Metrics Inspector.
Select ‘Fixed Position’. What happens now is that the shape now slides behind the Navigation Menu widget. When using Fixed Position on a Responsive page, it is as if the object has been lifted off the page and everything on the page moves up to fill the space left behind. This is why you created a dummy shape to fill the gap where the navigation menu would have been.
- Style the Navigation Menu widget as you want and add the other objects you want to your page.
- Preview to test out the sticky responsive navigation.
Testing and Troubleshooting Your Sticky Responsive Navigation
When creating a sticky navigation for responsive pages, it is usually best to create this as the first thing on the page. When working with responsive design it’s generally easier to work ‘top down when adding objects to the page.
Don’t forget that EverWeb includes a ‘Pick Layer’ option when you secondary click on an object in the Editor Window. This is useful if you need ever need to select the background rectangle shape behind the Navigation Menu widget.
If you find that objects on the page appear on top of the navigation menu, select each of these objects and use the Arrange-> Send to Back menu option. Next, select the Navigation Menu widget itself and select Arrange-> Send to Front. If this does not work, select Arrange-> Always on Top for the Navigation Menu widget only.
Sticky Navigation for Mobile Devices
You can use the Navigation Menu widget’s Responsive Navigation Bar option in the Responsive Options to display a Hamburger icon style navigation on your page. For a fixed width mobile page, there is usually no need to change the ‘Appear at Width’ value as its default value of 700 should be greater than the ‘Content Width’ value of the page which would usually be around 320-450 pixels wide.
A Responsive page scales automatically to suit the device your are viewing it upon so there is no Content Width value. You can however, change the ‘Appear at Width’ value from its default 700 pixels if you need to, although this is generally not necessary.
Creating a sticky navigation for fixed width and responsive pages takes little time once you know the steps that it takes to make it possible!
If you have a question about this blog, please let us know in the Comments Section!