You can make a header, footer, or section 'sticky.' A sticky website element remains in a fixed position as visitors scroll up and down a page.
1 Opening the Advanced tab
Create a sticky website element by customising the Position Fixed settings in the Advanced panel of the Header, Footer, or Section components. For this example, we set the Header as a sticky element.
- Click WEBSITE on the top menu bar.
- On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays.
- Hover the mouse pointer on the Homepage.
- Click the Edit button. The Edit Content area opens.
- Hover the mouse pointer on the header or footer. The toolbar displays.
- Click the Pencil icon. The edit panel opens.
- Click the round Settings button. The Header or Footer Settings panel displays.
- Click the Advanced tab.
Sticky Section
If you want to make a fixed position section, the process is similar to above. The way to open the Advanced Settings panel is different.
- Hover the mouse pointer on a Section. The toolbar displays.
- Click the Settings button in the top left corner of the toolbar.
- Scroll down and click the Advanced tab. The Advanced Settings panel displays.
2 Customising Position Fixed settings
Fix Position
Fixing the position of an element is an option. Check this box if you want this feature. Clear the box if you do not want a fixed element.
Bring to Top
This box changes the display order of the element. Check the box if you want the fixed element to display on top of the content as a visitor scrolls down a page. Clear the box if you want the fixed element to display behind the content.
Corner
Select an arrow to position the fixed element in a screen corner. Choose between top left, top right, bottom right, and bottom left.
X
Click the plus (+) or minus (-) boxes to move the element along a left-right axis. The starting point for shifting the element along a left-right axis depends on its Corner position (see Corner above).
Y
Click the plus (+) or minus (-) boxes to move the element along a top-bottom axis. The starting point for shifting the element along a top-bottom axis depends on its Corner position (see Corner above).
Top Margin
Click the plus (+) or minus (-) boxes to increase or decrease margin spacing at the top of the screen.
ID or Class Name
To learn about custom styling with ID and Class Name selectors, see:
- Adding CSS
Component Visibility
Control which devices display the content. The default is all devices. To learn about visibility settings, see:
Comments
0 comments
Please sign in to leave a comment.