How to Make any Element Fixed – Divi Builder

by | Feb 21, 2018 | Divi, Light Side

Requirements:

No requirements.

1. The Code

Let’s see the code and what can we do with it:
1
2
3
4
5
6
/* Fixed Element */
.fixed-element {
position:fixed;
bottom: 100px;
left: 50px;
}
I am sure you noticed the button just next to the left-bottom side that stays in a fixed position while you scroll, well that’s what the code does!. Simply add the CSS class “fixed-element” to any Section / Row / Module and you just got it!.

2. Z-index

z-index is used to create layers. In order to make your fixed element appear on top of all sections you can use something like: z-index: 9999 !important;

The button you see at your left is going to be hidden if you scroll and then appear again, play with different z-index values and see what you can get!

2. Moving Stuff Across the Window

There 4 basic CSS properties called: top, bottom, right and left.
For example to moving the button to 100px right side and 100px top (totally the opposite as it is now) i would do the next:
1
2
3
4
5
6
/* Fixed Element */
.fixed-element {
position:fixed;
top: 100px;
right: 50px;
}

You just did it!

4 Comments

  1. Oscar

    Hi there, how can I make the section with this code go OVER the other stuff, and not UNDER it ? Thanks a lot !!!

    Reply
    • Nico Master

      Hi Oscar!, for placing the content under or on top other layers / elements you will need to add the z-index property for example like this:

      /* Fixed Element */
      .fixed-element {
      position:fixed;
      top: 100px;
      right: 50px;
      z-index: 9999 !important;
      }
      Hope it works for you 😀

      Reply
  2. David

    Hi,

    And how will be if you want that sticky content was above of rest of content when you make scroll??

    Thank You!!

    Reply
  3. Nico Master

    Hi David! Have you tried z-index? This property create layers to overlay or underlay other elements.
    Try adding the z-index property and adjust the value to your necessities. You could use bigger z-index on the above content and the at the point you want to show you fixed element, form there use a lower z-index for your sections.
    Hope makes sense!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!