Experiencing an issue?

Creating a Sticky Website Element

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 PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

 

mceclip0.png

 

The Website Content page displays.

  1. Hover your mouse pointer on the Homepage.
  2. Click the Edit button. The Edit Content area opens.

Untitled design.png

 

Hover the mouse pointer on the header or footer. The toolbar displays. Click the pencil icon. The Edit panel opens.

h-2.png

Click the round Settings button. The Header or Footer Settings panel displays. Click the Advanced tab.

h-3.png

Sticky Section

If you want to make a fixed position section, the process is similar to the above. The way to open the Advanced Settings panel is different.

  1. Hover the mouse pointer on a Section. The toolbar displays.
  2. Click the Settings button in the top left corner of the toolbar.
  3. 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.

h-4.png
 

  • 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 controls which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility

 

 

Related articles