Using the 'Design' node in the Govstack CMS, you can configure many aspects of the layout of your website, including:
- Headers
- Navigation icons
- Directional icon options (used globally from your navigation dropdowns to your 'back to top' button)
- Heading order and heading separators
- Style of logo links, navigation links, content links, footer links and button links
Adjust the layout for your website
Follow these instructions to adjust the layout options for your website:
- Navigate to the 'Design' node in the Govstack CMS back office
- Select the design style that is currently in use for your website (there is likely only one)
- Select the 'Layout' tab
- Expand the element you would like to configure and adjust the layout options accordingly
- Select 'Save and publish' when you are happy with your changes
Layout options
Learn how to configure each of the layout options. You'll be able to see the impact of each update before publishing the changes.
Expand the 'Site Header' tab to adjust the layout for your header or top menu bar. Some of the options include:
- Header on Large Screens - Choose from 20 various header layouts presented on large screens. You can preview each layout as you select each of the options.
- Initial or Dropdown Open - Choose if you would like your header to display page menus from your parent pages when visitors first arrive to the site (dropdown open) or if you would like the page menus closed when first visiting (initial). The green eye icon represents your selection.
- Show Header on Scroll - Switch this toggle to 'Yes' if you would like the website's header to stay on the screen as the user scrolls downward on the site.
- Transparent Header - Switch this toggle to 'Yes' if you would like your header to appear as a transparent menu bar.
- Header on Small Screens - Select from four different header layouts that you would like for your website to be displayed on small screens.
You can update the layout of the burger icon that appears on the website. Select the number of lines and their positioning for your burger navigation icon. Four options are available.
Select a directional icon option for your website. These icons are used throughout your website and appear as navigation dropdowns, as well as 'back to top' button icons. You can choose between a triangle icon, arrow icon or chevron icon.
You can configure the order and separators for the headings used throughout your website. Your selection will impact all areas and pages. Options include heading order and heading separators.
Heading order
Select 'Heading First' if you would like your regular Heading to appear first within your content, followed by any secondary heading. Select 'Secondary Heading First' if you would like your Secondary Heading to appear first within your content, followed by any regular heading.
Heading separators
Choose where you would like to position any heading and secondary heading separators throughout your website. You can choose from no separators or up to all four separators. Options include 'Above Headings', 'Below Headings', 'Above Secondary Headings' and 'Below Secondary Headings'.
You can adjust how links appear throughout your website with the following link options.
Logo link
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like logo links to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like logo links to be underlined when users hover over the link.
Main navigation links
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like main navigation links to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like main navigation links to be underlined when users hover over the link.
Secondary navigation links
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like secondary navigation links to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like secondary navigation links to be underlined when users hover over the link.
Content links
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like links in your content to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like links in your content to be underlined when users hover over the link.
Footer links
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like links in your footer to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like links in your footer to be underlined when users hover over the link.
Button links
Switch the toggle to 'Yes' on 'Underline on Initial' if you would like button links to be underlined when users first arrive to the page. Switch the toggle to 'Yes' on 'Underline on Hover' if you would like button links to be underlined when users hover over the link.
Under the 'Miscellaneous' tab, switch the toggle to 'Yes' under 'Back to Top' if you would like to display a 'Back to top' link to and choose the horizontal positioning on the page for the link (left, centre or right).
You can also select the horizontal positioning for your 'Notification' pop-out (left, centre or right).