Sticky Responsive Navigation Menus in EverWeb
EverWeb! The Best Drag and Drop Responsive Website Builder for the Mac. https://everwebapp.com In this video, I am going to create a navigation that sticks to the top of a responsive page, so that the page contents remain visible at all times. Remember that it's always best to use a Master Page so that you only need to add the navigation once in your website. Any page using the Master page will inherit the navigation. If you change the Master page all the pages that use it will be automatically updated. To create a Sticky Navigation for a Responsive Page start by creating a responsive Master page, for example, by using a responsive blank page, if you have not done so already. Add the Navigation Menu widget to the page. As this is a responsive page, the widget will automatically display at full width. In the Widget Settings add a background color to the navigation. This will stop the contents of the page from being visible under the navigation when you scroll the page. In the Metrics Inspector make a note of the Height of the Navigation Menu widget, e.g. 50 pixels. In order for the sticky navigation to work properly, 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 should be positioned directly below the Navigation Menu widget. Change the color of the shape to match the color of the background of the navigation using the Fill section of the Shape Options tab. 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’ to pin the navigation menu widget in place. What happens when you do this is that the shape below the navigation slides behind it. When using Fixed Position on an object in a Responsive page, it is as if the object sits on a layer above the page. Everything else on the page moves up to fill the space that is left behind. This is why you create a dummy shape with the same height as the Navigation Menu widget 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. Remember to attach your Master Page to your regular page. Preview to test out the sticky responsive navigation. The navigation will also work automatically on mobile devices when you are using a Hamburger Navigation icon. To activate this option, select ‘Responsive Navigation Bar’ in the widget settings of the Navigation Menu widget.
EverWeb! The Best Drag and Drop Responsive Website Builder for the Mac. https://everwebapp.com In this video, I am going to create a navigation that sticks to the top of a responsive page, so that the page contents remain visible at all times. Remember that it's always best to use a Master Page so that you only need to add the navigation once in your website. Any page using the Master page will inherit the navigation. If you change the Master page all the pages that use it will be automatically updated. To create a Sticky Navigation for a Responsive Page start by creating a responsive Master page, for example, by using a responsive blank page, if you have not done so already. Add the Navigation Menu widget to the page. As this is a responsive page, the widget will automatically display at full width. In the Widget Settings add a background color to the navigation. This will stop the contents of the page from being visible under the navigation when you scroll the page. In the Metrics Inspector make a note of the Height of the Navigation Menu widget, e.g. 50 pixels. In order for the sticky navigation to work properly, 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 should be positioned directly below the Navigation Menu widget. Change the color of the shape to match the color of the background of the navigation using the Fill section of the Shape Options tab. 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’ to pin the navigation menu widget in place. What happens when you do this is that the shape below the navigation slides behind it. When using Fixed Position on an object in a Responsive page, it is as if the object sits on a layer above the page. Everything else on the page moves up to fill the space that is left behind. This is why you create a dummy shape with the same height as the Navigation Menu widget 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. Remember to attach your Master Page to your regular page. Preview to test out the sticky responsive navigation. The navigation will also work automatically on mobile devices when you are using a Hamburger Navigation icon. To activate this option, select ‘Responsive Navigation Bar’ in the widget settings of the Navigation Menu widget.