Sidebar layout for desktop

Modified on Mon, 30 Mar, 2020 at 12:37 AM

Overview

You can now change your desktop site layout to a sidebar layout. Sidebar layout displays the header on the side of the site (either left or right) and is a great design tool to give a unique look to your site. The sidebar header also acts as a sticky header so it will always be displayed on the screen and you can also drag & drop widgets into the sidebar like any other row.


Guide

To change your site layout to a sidebar layout, click the Design tab on the left menu, then select Site Layout.

sidebar_1.1.png

After you have selected your sidebar layout, you can add rows,  drag & drop widgets into the sidebar header from the widgets menu and customise it as you wish. 


To edit the design of the sidebar header, right click the sidebar and select Edit Design. You can choose one of the multiple sidebar header layouts to apply to your site, display it on the left or the right side of the screen, define it's width etc. 

sidebar2.png

Considerations

When I switch from a traditional header to a sidebar layout, will the widgets and design of my old header by converted to my sidebar header?

When you switch from a traditional site layout to a sidebar layout, the header will keep the logo, all the widgets you had will be removed (similar to switching the header layout on the top header layout). Background color will be changed according to the layout you selected. 


Can I apply the shrinking header to the sidebar navigation?

The shrinking header is not available for the sidebar navigation. The sidebar is always displayed on the site regardless of the site scrolling.


My sidebar header disappears as the screen gets smaller, where did it go?

On screens smaller than 1090 pixels width, the content of the sidebar except the first image will be hidden and an expand menu icon will be displayed instead. You can customise the color of the trigger button that will appear in the Design Editor.

sidebar_hamburger.png


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article