How to use this Hero.

Start by previewing this page in a browser at both desktop and mobile size. This will let you see what the final result should look like. (Suggest initially previewing in Safari)

With this file open, delete this INSTRUCTION layout block and save the project with a new name. You’re now ready to edit your hero section to better suit your needs. (Be sure to read the instructions first)

In the Navigation Group, change the Logo Image and edit the Desktop Menu - choose any font and styling options of your choice.

Tip: When adding a logo, try to use an SVG whenever possible. This will enable you to to use the Colour Overlay option in the style panel to change your logo colour if needed. You can try it out in this page - just select the Logo and change the tint colour in the colour overlay option in the style panel.

Background image:

The background image is set as fixed in window to give it a parallax effect. If you would prefer to disable this feature select the Hero Image Wide Box in the layers panel, and uncheck the Fixed in Window option in the style panel.

Sticky Navigation:

The navigation group is designed to scale on page scroll - this works on the desktop and mobile versions of the page. Likewise, the Getting Started Button will subtly enlarge to draw attention to it. Typically, this would link to the next section of the web page, or another page entirely.

The mobile page has a Mobile Menu Icon in the navigation bar that opens a popup menu. You can edit the menu by selecting the Mobile Menu Popup in the layers panel. You may also want to change the icon to one of your preference.

Possible Issues:

Not all browsers are created equal, so you may find some quirks when previewing on different browsers. For example, the navigation group contains a background box that has a bur effect. In Safari, this effect is just fine, but in other browsers, the effect may not show up. To correct this issue, simply remove the zoom animation from the navigation and adjust the size of the navigation group so that its a fixed size on your page - this will restore the blur effect. Always check in different browsers and mobile devices to ensure everything looks the same.

Here is the expanded layers panel so you can see where everything is: