Creating a Navigation Bar
Last updated
Was this helpful?
Last updated
Was this helpful?
Starting on our Home Page we'll first need to drag out a stacked layout in to our editor. In the properties panel
Set orientation to Horizontal (This is the direction we want our elements to layout)
set padding to 20px in all directions (To give some space around our navigation elements)
Set a height to 75px ( This is how tall we want our navigation bar)
Set Background color to white
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%.
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.
