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!

[coffee]

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 Add a CTA to the Divi Menu

How to Add a CTA to the Divi Menu

Welcome everyone! This time I will show you how easy you can create an awesome CTA button for your Divi Menu. Again as like always everything in a couple of minutes! Let’s get started.

How to Change the Divi Hamburger Menu Icon

How to Change the Divi Hamburger Menu Icon

Do you ever wanted to change the default Divi Hamburger Menu Icon for a custom logo or other image? I will show you how to get it done in just a couple of minutes. Let’s get started!

Follow MasterDivi on Facebook

Be updated with the latest tricks!