Adding logo and navigation to your site

Yola Sitebuilder+ allows you to personalize the look of your website by giving you the tools to change the header banner image, page background, add a logo, and more.

Keep in mind that Yola Sitebuilder+ automates the design so you can build a professionally polished and unique site that will help you stand out from the crowd.

Managing the navigation

One of the first things your visitor will see and use the most is your navigation. Navigation is added by the Header block.

Your header can contain links to pages, your contact phone number, and social media icons leading to your social media accounts. Here's a tutorial on managing the Header block:  Customizing the Header block

Adding a logo

You can easily add a logo to the header of your website. Logo creates a professional and unified look and feel for your site. If your template comes with a website name as text, you need to first enable the logo. Here's how to do it: Adding a logo.

Changing the color of the navigation bar

Your template comes with a header block already installed. Here's how you can modify its appearance:

1. Click on the header to activate the Control Pane and click the Block Settings icon.

Screenshot_2021-06-18_at_12.48.02.png

 

2. In Block settings, click the Appearance tab. In Block style, choose one of the pre-set background colors for the Header block. These colors will match the color scheme of your template.

Screen_Shot_2021-02-16_at_12.46.11.png

3. Click Save to confirm the changes.

 

Making the navigation transparent

To remove the background color in your header navigation, go to Block settings > Appearance and check the option Overlay next block.

Screenshot_2021-06-18_at_12.48.53.png

This will make the navigation bar transparent and the background of your next block will be visible. All header color customizations will be removed.

Click Save and then Publish to make changes live.

 

Enabling a sticky header

The sticky header will fix the position of the header so it remains visible when a user scrolls the page. It will allow quick access to the navigation from any block of the page.

To enable, go to Block settings > Appearance tab and click the Make header sticky option.

Screenshot_2021-06-18_at_12.46.59.png

Click Save and Publish to make changes live.

 

Removing the header navigation

If for some reason you do not want to show the navigation bar at the top of the page, you need to delete it. Click on the navigation bar to activate the control pane and click on the Delete icon.

Screenshot_2021-06-18_at_12.46.02.png

Other helpful articles

Adding a page to a navigation

Expanding your navigation

Editing your site headline

I cannot add a header, why?

Managing website settings

Was this article helpful?
1 out of 1 found this helpful