Creating a Navigation Bar

Creating Layout for our Navigation Element

Starting on our Home Page we'll first need to drag out a stacked layout in to our editor. In the properties panel

1. Set orientation to Horizontal (This is the direction we want our elements to layout)

2. set padding to 20px in all directions (To give some space around our navigation elements)

3. Set a height to 75px ( This is how tall we want our navigation bar)

4. Set Background color to white

Add Logo to Navigation bar

Next lets drag in an Image module inside the stacked layout. Make sure the properties button is selected in Properties Panel.

In the Properties Panel, Select an image/logo asset that you have uploaded to the asset manager.

Next in the Object Fit field set to `contain` so that the image doesn't go past the navigation bar and give it a max height of 100%.

Creating Botton in Navigation Bar

To create clickable buttons that can redirect your users to other pages or sites, drag in an other stacked layout into our navigational bar. Set the orientation to Horizontal and set Columns in Gap Sizing to 10px. This will put a 10px gap between all elements within this stacked layout.

Next we will grab two `Button` modules and drag them into the stacked layout. In the Properties Panel we can give them names and in the styling tab, change the background color to white.

In the Button Properties, you'll be able to add a URL link and you'll see a check box that will allow the link to be opened on same page or new tab when clicked.