Site header

Each Webround site has an editable header. You can add an image or switch to a button by left-clicking on the logo, you can change its background color and shadow settings, or change the elements layout.

Transcription

Now that we have changed the background color for our page, we also want to do this for the header.

We access the global components menu and the header section. Here we will find the background color for the header. By clicking on it, we will open the color picker. We select the same color that we have previously saved.

If we take a look at our template, the header has a bottom border. To replicate this style in Webround, we are going to use a shadow. By using a value of 0 for the blur, the border is going to appear solid. One pixel offset on y-axis is going to simulate a border of one pixel of width.

We can also see that the positioning of elements in the template is different. Here there is a logo on the left and a bar on the center and actions on the right. So we need a different positioning for elements in Webround. We access the logo positioning property and we change it to Middle left navbar center.