Preview this page before making changes - it’s important to see what the elements are supposed to do before editing.

This hero demonstrates how a vertical menu can be incorporated into page design.  The menu appears on the right of the screen as the page starts to scroll. It remains visible on the right-side of the page so it’s always visible to the user. Clearly, such a design means designing the remainder of the page in a way that page content doesn’t interfere with the navigation element. If things like images stretch to the right-edge of the page, the navigation background will be blurred so it retains it’s clarity regardless of the background.  However, text content will have to be avoided on the right-side of the page.

On the mobile version of the page, the navigation bar will appear from the top of the screen as the page is scrolled. The mobile menu itself will typically be a popup that will display when the mobile menu icon is clicked/tapped. We haven’t include the popup in this example, but it’s really easy to add. 

If this design is used in an actual website, you may have to adjust positions and animation settings to better accommodate your design, but this example sets you on the right track.