Articles in this section

See more

Creating fixed or pinned elements on a page

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.

Although there's not a way to make page elements fixed or pinned to the browser in Semplice, with the use of a little CSS magic you can turn any page elements placed inside of a section into fixed objects.

 

fixed-section.gif

You can view a live example of this effect here.

Creating the setup

To get started, place all the objects you want to be fixed to the browser into a NEW section. This section will house all of our fixed objects. You can then arrange and set placement for your objects, the placement of your objects within your section will be how they are displayed as fixed objects on your page.

We recommend placing the section at the bottom of your page, but you can place it anywhere on your page.

 

creating-fixed-section.gif

Assigning the fixed classname

The next step is to assign a custom classname to our section. This classname will allow us to target this entire section with CSS and make it fixed. Navigate to your section, and from the Section Styles area at the bottom add the custom class of 'fixed-section'.

assigning-the-class.gif

Adding the CSS

We will then need to add the custom CSS required to make the section we created fixed on our page. Navigate to Customize > Advanced > Custom CSS and place the following code in the Global CSS editor:

/* This is what makes our section fixed */
.fixed-section {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
}

/* This makes our fixed elements clickable */
.fixed-section .column-content {
  pointer-events: auto !important;
}


Making it responsive

If you wish to make your fixed elements responsive, you can use the Responsive Tool to adjust them. In many cases, it would be ideal to either hide your fixed objects or have them revert to regular, non-fixed objects.

To make your objects revert to non-fixed items, place the following in the Mobile CSS editor:

.fixed-section { position: relative !important; }

 

To hide your fixed objects completely for mobile, place the following in the Mobile CSS editor:

.fixed-section { display: none !important; }

 

Related articles