How to add a Vertical Nav / Sidebar

To change your site layout to a vertical nav sidebar layout (aka Sidebar):


  1. In the left panel, click Design, and then click Site Layout.
  2. Select the sidebar layout
  3. Hover over the "row" that contains the navigation and right click --> Add--Designed section
  4. Open Headers section folder and select and add the Sidebar section (at bottom of list)
  5. Delete original navigation row
  6. To edit the background color of the vertical nav / sidebar header, hover over the sidebar, and click orange Sidebar at the top right corner, scroll down to background color and adjust accordingly.

Important

On screens smaller than 1090 pixels width, the content of the sidebar except the first image (logo) will be hidden and the hamburger menu / trigger icon will display.   To change the menu icon color, hover over the sidebar, and click orange Sidebar at the top right corner, scroll down to Small screen settings to update the Expandable sidebar icon color.


Additionally, artist must switch edit display view to tablet and swap out default logo with the client's.  Update tablet header and hamburger menu to match desktop vertical nav / sidebar colors.


NOTE: 

  • Do not switch Sidebar location to right side of page. 
  • Do not increase or decrease max Sidebar width.
  • Do not add additional logos, icons, text to Sidebar.
  • If client wishes to add additional elements suggest switching to traditional webpage orientation. 
  • When you switch from a traditional site layout to a sidebar layout, the header keeps the logo, and all the widgets you had will be removed (similar to switching the header layout on the top header layout). The background color will be changed according to the layout you selected.
  • The shrinking header is not available for the sidebar navigation. The sidebar is always displayed on the site regardless of the site scrolling.
Share by: