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:  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 of your site. If your template comes with a website name as a 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. Hover over the header to activate the Control Panel and click the Block Settings icon.



2. Go to Settings > Appearance and choose one of the pre-set background colors for the Header block. These colors will match the color scheme of your template.



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.


This will make the navigation bar transparent and the background of your next block will be visible.

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 and click the Make header sticky option.

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. Hover over the navigation bar to activate the menu and click on the Delete icon.


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