How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Posted on January 30, 2017 by in Divi Resources | 49 comments

How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Sidebars aren’t so popular anymore. In many cases, they end up being more distracting than they are helpful. But sometimes a sidebar makes perfect sense, especially when dealing with lengthy content. That is why I set out to create a sidebar that makes a lot of sense.

Today I’m showing you how to use the specialty section in the Divi Page Builder to create a responsive fixed (or sticky) sidebar menu with smooth scrolling anchor links (or jump links). Because the sidebar remains visible and the anchor links smoothly scroll to different sections on the page, the sidebar stays married to the content, making it a helpful UX feature. Like a document outline, this combination makes your web page content more accessible and easier to read. It is a refreshing solution for those long scrolling pages.

Check it out!

Today’s Before & After: A Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Here is a gif showing the page without the fixed sidebar modification. I added the anchor links to the menu to capture the inconvenience of having to scroll back up to the top of the page to view the menu.

before-img-600

Below is an example of the fixed sidebar and anchor link combination. The end result is an elegant solution with seamless transitions throughout your content.

fixed-sidebar-600

The Concept & Inspiration

google-doc-img

Earlier this year, Google added a helpful for Google Docs that allows you to easily deploy a fixed sidebar with a clickable outline that jumps to the different headings on your document. I love it because it helps me find information a lot faster. I thought it would be cool to bring this same feature to your website.

Preparing the Design Elements

In this example, I’m setting up a mock tutorial to display the functionality of the sidebar. Even though this functionality will be used with your own content, here is what I’m using today:

For the page content, I’m using dummy lorem ipsum text with custom CSS added to the headers. I’m also adding five royalty-free images from https://unsplash.com sized 700px by 400px.

For the sidebar, I’m adding a mock logo/image sized 200px by 200px to fit at the top of the sidebar. The rest of the sidebar is styled using CSS.

Implementing the Design with Divi

To add these modifications to your own website, follow the instructions below step-by-step.

Adding the Specialty Section

First, add a specialty section to your page by choosing the “Specialty Section” option from the in-line “add new section” controls.

specialty-sec

Select the one-third / two-thirds layout.

specialty-section-edited

Adding the Rows & Content

To create a section for the page title, click the insert column link inside the existing row module.

insertcolumn

Insert a fullwidth row.

add-row

Next, add a text module to the row module. Inside the text module under general settings, locate the content section and make sure the text tab is selected. Add the following html for the title (make sure to use an h1 tag).

<h1>Cooking <span style="color: #406ac2;font-weight: 600">101</span></h1>

add-h1

(Optional: You can label the module by scrolling down to the Admin Label field and entering “page title”. I suggest doing this for all future modules as well.)

Click Save & Exit.

Now add the first of five additional row modules for the rest of your content sections. Each of the five rows will have…

  • a text module (for the subtitle)
  • an image module (for the image)
  • another text module (for the rest of the text).

To add another row module click “Add Row” beneath the existing row module. Select the full width row option, insert a text module, and add the text “Section 1” in the content section (give it an h2 tag since this is a subtitle).

step1

To add a dark gray background to the text module, select the Advanced Design Settings tab and change the background color to the hex color #333333.

gray-bg

Give it a border radius by selecting the Custom CSS tab and adding the following css to the Main Element code editor box:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-radius

Click Save & Exit.

Inside the same row module add an image module under the text module. In the image module settings, upload your image (I’m using one from unsplash.com).

upload

Click Save & Exit.

Next add another text module under the image module. Also add some text to the content box. A few paragraphs of lorem ipsum text will do the trick for now.

Click Save & Exit.

Now your layout should look like this:

after-step1

For the next 4 rows, speed up the process by duplicating the row you just made. Simply click the duplicate icon on the row module four times.

duplicate

Your layout should look like this:

after-duplicate

(Note: After duplicating the rows, you will eventually need to go back and change the subtitles, images, and content for each as you see fit.)

Now that you have all five content rows completed, you need to go back to each one and add your anchor link target ID. This target ID is how your sidebar links will know where to scroll to on the page.

For each of the five row modules, go to the Row Module settings and add a unique CSS ID under the Custom CSS tab (make sure it is CSS ID and not CSS Class). Since I’m going to be linking to different steps for a tutorial, I’ll just name them “step-1”, “step-2”, “step-3”, “step-4”, and “step-5”. So, the first content row should have a CSS ID of “step-1”.

step-1-edited

The next row will have a CSS ID of “step 2” and so on.

Creating the Custom Menu

Now that you have your rows and css id’s setup, you can start creating a custom menu for your anchor links. Start by going to Appearance → Menus in the WordPress admin. Click “create a new menu” and name it “fixed sidebar menu”.

create-new-menu

After that, click to toggle open Custom Links and add your anchor link. You want this first one to link to the first row you created with the unique class id “step-1”. To do this, type “#step-1” in the URL text box. Also give the link a name in the Link Text field. Then click the “Add to Menu” button.

create-menu-links-edited

Repeat this for the next four links and make sure the CSS ID names for each row match the url for each custom link (don’t forget to add the hashtag (#) before). For example, the custom link url “#step-2” should correspond to the CSS ID “step-2” and so on. Save your menu. The links are now properly setup to jump to the five specific sections of the page when clicked.

Note: The smooth scrolling effect for the anchor links will happen automatically because it is built into Divi already which is a nice bonus!

Creating a New Widget Area

Next, create a new widget area for your new menu. In your WordPress admin, go to Appearance → Widgets, enter the name “fixed sidebar” in the Widget Name box and click the “create” button.

add-fixed-sidebar-widget-edited

Note: You may have to refresh the page after creating the widget area for the new area to show up.

To add a logo/image to the top of the sidebar, locate the text widget on the left side of the page and drag it over inside the Fixed Sidebar widget area you just created. Click to toggle open the Text Widget and add an html img tag using this code (notice the dimensions for the image should be 200px by 200px):

<img src="Your Image URL" alt="Your Alternate Text" width=”200px” height=”200px” class="aligncenter" style=”padding-right: 15px” />

badge-image

Replace “Your Image URL” with the the full url of your image and “Your Alternate Text” with an alternate name for your image.

Click Save.

Next, locate the Custom Menu widget on the left side of the page and drag it over inside the Fixed Sidebar widget area under the Text Widget. Click to toggle open the Custom Menu widget and select the custom menu you created called “fixed sidebar menu”. Then give your menu a title (you can put “Cooking Steps” for now).

add-menu-edited

That’s it. Save the widget and head back to your page.

Creating the Sidebar

Finally, it’s time to add your sidebar to the page. Using the Divi Page Builder add a row with a full width column in the ⅓ column (left side). Next, add the Sidebar Module.

sidebar-module

Under the Sidebar Module general settings tab change the following:

  • Widget Area: fixed sidebar (the one we created earlier).
  • Text Color: Light
  • Disable On: select phone and tablet (This is an important step in making this mobile friendly)

add-widget-to sidebar-edited

Under Advanced Design Settings, switch the setting “Remove Border Separator” to “YES”.

remove-border-edited

Now go to the Custom CSS tab and add the following css in the Main Element code editor box:

background: #333;
position: fixed;
width: 25%;
padding: 120px 0px 20px 15px;
top: 0;
left: 0;
height: 100%;

sidebar-custom-css

Click Save & Exit.

Taking Care of Mobile

Currently, the fixed sidebar will not render correctly on mobile devices. This needs to be fixed. Remember how you hid the sidebar from phone and tablet displays? Now you need to add a “non-fixed” version of the sidebar that only shows on phone and tablet.

First, duplicate the sidebar module by clicking the duplicate icon.

duplicate sidebar-edited

In the Sidebar Module settings under general settings, edit the Disable On setting by unchecking the phone and tablet options and checking the desktop option (the opposite of what you had for the first sidebar).

Then go to Custom CSS and take out all the code in the Main Element box and add the following:

background: #333;
padding: 20px 15px 20px 30px;

Now you have two sidebars – a fixed sidebar that shows on desktop only and a traditional sidebar that shows only on mobile devices.

Note: Some of you may prefer to make the sidebar responsive by other means such as media queries. That is a great option too. I did it this way to keep it simple.

Additional Styling

This last step is all about styling. Right now the fixed sidebar overlaps your footer at the bottom and the menu links are just too boring. You can add a few custom css elements to fix this.

Go to Divi Theme Options on the WordPress admin. Under the General tab add the following css in the Custom CSS box at the bottom of the page:

#menu-fixed-sidebar-menu li a { 
color: inherit; 
display: block; 
width: 100%; 
padding: 15px 15px 15px 30px; 
margin-bottom: 10px; 
background: #555; 
border-left: 4px solid #888; 
text-transform: uppercase; 
} 

#menu-fixed-sidebar-menu li a:hover { 
background: #fff; 
color: #333; 
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

@media (max-width: 1280px){
.et-social-icons, #footer-info {
float: none;
text-align: center;
}

@media (max-width: 980px){
#main-footer { 
width: 100% !important; 
}

theme-options

Note: The css id selector is dependant on the name of your menu. For this style to work, make sure you named your menu “fixed sidebar menu” so it corresponds correctly to the css #id selector “#menu-fixed-sidebar-menu”.

The Final Result

fixed-sidebar-600

That’s it. You now have a responsive fixed sidebar menu with smooth scrolling anchor links!

The beauty of this setup is you can easily add fixed sidebars to any page with different anchor link menus. This would be great for membership courses, tutorials, FAQ’s, portfolios, or long blog posts. Do you have other uses to share? I’m interested to hear what they are in the comments.

In Conclusion

The Divi Specialty Section is something we haven’t written a lot about yet–but we plan to! So keep your eyes peeled for more posts like this one in the future. And please, let us know in the comments below if you have any requests!

49 Comments

  1. This article title is a mouthful, but it’s quite useful! Thanks!

    • Thanks Ryan!

  2. WOW.

    That’s… %$#$#@!! Awesome.

    I just don’t know how you guys can keep outDOING yourselves like this.

    SO glad I’m a lifetime member, lol.

    Now I’m gonna go blow some minds with this!!

    • Jason Champagne

      Thanks Jaime. Let me know how it goes!

  3. Love this one, Jason! I have a question. How does it behave on mobile? Wouldn’t there not be enough width to the screen to house a fixed sidebar menu plus content to the right?

    • Sheri, note that in the step where he added the Divi section he checked the boxes to not display on phone and tablet devices in the Sidebar Module Settings. Hope that helps 🙂

    • He specifically addresses this in the section “Taking Care of Mobile”

    • Thanks Sheri.

      Basically the mobile version reverts back to a standard (non-fixed) version of the sidebar menu.

  4. Really helpful and much appreciated.

  5. Thanks for this. Is there a link to a live demo somewhere?

  6. This tutorial is even more awesome than the others. Thanks!

    • Great to here!

  7. This is another outstanding resource! Thank you for your easy-to-follow steps, providing a before-and-after glimpse of the results, and offering CSS design elements to use as well!

    Out of curiosity: can the same or similar effects be achieved without having to use a custom menu or sidebar widget? In practical terms, if one had dozens of articles or pages for which one would like to apply a sticky sidebar like this, but each had slightly different menu items, how would one achieve that without creating dozens of custom menus? Could one use the Divi button module in a specialty section to represent the links to the anchors, and edit the CSS and other code to work effectively without added menus?

    Thanks in advance for any related/additional tips!

    • Probably with vertical tabs u can achieve a similiar result, great post

    • Mathias,

      Thanks for the kind words.

      What I believe you are describing is definitely possible and a good idea. You could create custom anchor links using html code (ie. example) in a text module or using something like the button module as long as the url is correct.

      Keep in mind, if you are wanting to have dozens of anchor links, you may run out of vertical space on the fixed sidebar so just keep the link font-size/padding small, or add an “overflow-y: scroll” to the sidebar class in css.

      Hope that helps.

  8. Great article and very useful, I am gonna try it on the future sites!

  9. Awsome!

  10. Interesting way of doing it! I have a pre-developed Divi child theme that I use on all new website builds and use sticky.js on most landing pages I create. I’ll have to keep this in mind for the future!

  11. wow, thank you so much!

    • Jason Champagne

      You’re welcome Tammy!

  12. Very helpful! It’s probably not something I would have thought of on my own, but I’m already thinking of places to use it. . .

    • Jason Champagne

      Please share your ideas. I would love to know how you plan on using it. I recently used it for a career page to scroll through job descriptions.

  13. It is awesome! But I can´t get the sidebar behind the footer, tried everything 🙁 it stays 100% height in front of.

  14. It is awesome! But he fixed sidebar overlaps still my footer – even when I paste the css and tried everything… some help somewhere?

    • Jason Champagne

      That’s my fault. There is a snippet of css that was left out. Try putting this in the custom css section:

      #main-footer { background-color: #222; width: 75%; float: right; }
      • mine still overlaps the footer even after including this new css code

        • This additional code solves the problem on the page, but makes the rest of the site have a footer that is 75% too.

    • I’m very new at this…so it might not be perfect. I did a work-around on the overlap of the footer by making the bg white and transparent with this code in the sidebar, custom css, main, replacing: background: #fff;
      with:
      background-color: rgba(0,0,0,0.0);
      I don’t know what other consequences this would have.

  15. This is fabulous! I have to work on it! Thank you!

    • Jason Champagne

      Great to hear! Let me know how it goes.

  16. Awesome Idea ! I love to discover all these tips wich help us to improve our practice. Thank you so much

    • Jason Champagne

      You are very welcome. Glad you liked it.

  17. Excellent Use of Fixed Sidebar..

    I was waiting for this fixed sidebar from last 1 and half year. Thank you so much for this solution.

    I have used similar trick in one of my previous project.

    I am going to use fixed bar in future now. Thanks again

  18. Link to a demo would be nice. =)

  19. How about release this awesome information as a page kit to easily install and implement? 🙂

    • Jason Champagne

      I hear you, Troy. I’ll see what I can do.

  20. Thank you very much for this. Is there a way to anchor link in the header instead of on the sidebar. Thank you once again.

    • Jason Champagne

      Hi Yasmin. Yes you can. However, I wouldn’t advise making it your primary nav menu unless you want it to show up on all pages. It would be better, in my opinion, to just stick with a one-page website approach in that case (See tutorial here )

      Hope that helps.

  21. Great job Jason! I cannot reduce space between picture and menu. Can you suggest the correct code to put in text area?
    Tks

    • Jason Champagne

      Sure. The space you are referring to is dependent on the the website gutter width which is currently set to 3. To change this go to theme customizer –> General Settings –> Layout Settings –> Website Gutter Width, and then switch it to 2. This will change it site wide though.

      If you want to change just that specific gutter width for that text area, you can add this custom css:

      #text-2 {margin-bottom: 8%;}

      Let me know how it goes.

      • The first solution works but I would like change specific gutter…I don’t know exactly were put your code…In divi options-> custom css?

        • Jason Champagne

          Yes. Just put it in Divi Options –> Custom CSS

  22. thank you for the awesome post, I’ve been working on a one-page guide recently and this technique is going to be helpful for navigation.

  23. hello is there any way to change the colour of the “Your Alternate Text” in the code

    .

    • Jason Champagne

      Unfortunately, I don’t think what you are trying to do is possible since alt text is set by the browser/operating system.

  24. Thanks Jason, excellent post and just what I was looking for.

  25. I learned a great deal from this tutorial…thanks for creating it. I am a beginner with css and was pleased I could make 2 of these on separate pages that operated independently. I’m going to use them as Private page tutorials to help a friend manage a site I’m making for him.

    • Jason Champagne

      That’s awesome, Ed. You are very welcome. I’m really glad it helped.

  26. Thanks for the great article. I have two questions. #1 – is there a way to make a certain spot in your page “push up” the menu when it is scrolled past? #2 – Is there a way to have the last clicked menu link stay highlighted? Or alternately just have the active area being viewed highlight it’s associated menu link? I hope those questions made sense.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
https://zaraz.org.ua

www.artma.net.ua

http://sweet-smoke.com.ua

Pin It on Pinterest