Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Create Scrolling Sticky Heading For Unique Anchor Link Navigation In Divi

Rifat Divi Tutorials Jun 8, 2021

Have you ever thought about creating a page that has an extraordinary sticky heading anchor link navigation system on that very page? Well! Divi has opened the door of numerous possibilities for web devs. You can create all sorts of magnificent designs through Divi. Today we will design a content webpage that will allow our users to explore it via sticky headings as anchor links. The headings will sequentially stick at the top of the page, and visitors can click just on headings to jump right on the section. Sounds cool! Then let's get on to today's tutorial, where we'll be creating this style with Divi's built-in feature called -"Sticky Option."

Design Preview

This is what our todays design will look like.

Section One: Getting Started

We believe you have successfully installed and activated the Divi theme. Now, add a new page from your dashboard and open it with Divi builder. Here we'll go with the second option that says, "Choose a premade layout."

We'll be looking from Meal Kit Layout Pack > Meal Kit Recipe Page Layout from the library. Click to pick it.

Download Divi The Best WordPress Theme

The Most Popular WordPress Theme In The World And The Ultimate WordPress Page Builder

Download Divi

We'll activate the layout by "Use this Demo" option.

Section Two: Layout Modification

Delete The Rows

After you are done with layout importing, delete the last two bottom row.

Now, you are left with one row called "Step-1".

New Row Creating & Content Adding

Add the marked row under the first one.

Now, select multiple module together and drag it to the newly created row.

Section Three: Creating Sticky Heading

In this layout, there will be four rows and each of those will contain a sticky header on their left column. We will create the first one and duplicate that for rest of the rows.

Step One: Create The Sticky Header For The First Row

Add a text module to the left column. This will be our sticky heading for this row.

Now update the following settings under design tab. Make sure to do changes on H4 header.

  • Heading 4 Font Weight: Bold
  • Heading 4 Font Style: TT
  • Heading 4 Text Alignment: Center
  • Heading 4 Text Size: 15px
  • Heading 4 Letter Spacing: 3px
  • Heading 4 Line Height: 2em

Also, update the spacing and rounded corner settings.

  • Margin: 0px
  • Padding: 10px
  • Rounded Corners: 3px

Under the advanced tab, update the following settings on sticky effects.

  • Sticky Bottom Offset: 150px (desktop), 0px (tablet)
  • Top Sticky Limit: Section (desktop), None (tablet)
  • Bottom Sticky Limit: Section (desktop), Row (tablet)
  • Offset From Surrounding Sticky Elements: NO

Now, go back to content tab and change the text as you need. Also put the text with H4 heading because earlier we modified H4 settings. Also, change the sticky background color.

  • Sticky Background Color: #febd2d

Go back to the advanced tab and update Z-index in sticky state. This will keep the text top on mobile devices.

  • Z Index (sticky): 10003

Add More Content

We need to attach some more content under the image so we have enough content to scroll through. So add another text module under the image and add some writings of your choice.

Duplicate Row 1

Finally, make a replica of row one by duplicating it.

Step Two: Create The Sticky Header For The Second Row

Now change the H4 heading in column 1.

Now change the sticky settings.

  • Sticky Top Offset: 50px (desktop), 0px (tablet)
  • Sticky Bottom Offset: 100px (desktop)
  • Top Sticky Limit: Section (tablet)

Update the Z-index value.

  • Z index(sticky): 10002

Duplicate Row 2

Then, again make a replica of row two by duplicating it.

Step Three: Create The Sticky Header For The Third Row

Again, change the H4 in column 1 and name it as Step - 3.

Now change the sticky options for the text.

  • Sticky Top Offset: 100px (desktop)
  • Sticky Bottom Offset: 50px (desktop)

Again, update the Z-index value for third row.

  • Z index(sticky): 10001

Update Z Index For Each Column One

We have already put a Z-index value to all the H4 headings. Now, we'll also update the value for each column that contains those sticky headings. Open each column and update the value.

  • Row 1 > Column 1 : Z-index = 20
  • Row 2 > Column 1 : Z-index = 19
  • Row 3 > Column 1 : Z-index = 18

Section Three: Anchor Links For Sticky Headings

Now we'll assign CSS ID to the rows so that the user can easily operate the entire page via them.

Row 1: Anchor Link

Open row 1 settings and add the following CSS id.

  • CSS ID: one

Now, Open the text module settings in column 1 or row 1 and add the module link URL.

  • Module Link URL: #one

Row 2: Anchor Link

Open row 2 settings and add the following CSS id.

  • CSS ID: two

Now, Open the text module settings in column 1 or row 1 and add the module link URL.

  • Module Link URL: #two

Row 3: Anchor Link

Open row 3 settings and add the following CSS id.

  • CSS ID: three

Now, Open the text module settings in column 1 or row 1 and add the module link URL.

  • Module Link URL: #three

Final View

So, here is our scrolling sticky heading for a unique anchor link navigation design.

Final Words

Honestly, using a sticky heading in web design brings more charm, and it helps visitors take a walk through the content. Using anchor links can enhance your visitors by boosting the user experience in a lot of ways. These built-in options of Divi give you more and more ways to provide a better website for your visitors. Hopefully, this tutorial will help you through making a sticky heading with unique anchor link navigation. Scrolling Sticky Heading For Unique Anchor Link Navigation. Please, let us know what more topics we can share with you. Have a good time with Divi.