How to Produce a Sticky Post Navigation Bar in Divi

A sticky post navigation bar is a reliable method to increase the user experience of any blog site site. In addition to the primary navigation of your website, post navigation links enable users to quickly leap to the previous post or the next post on your blog site. And, if you include those post navigation links to a sticky bar, those links stay noticeable and more available.

In this tutorial, we are going to develop a sticky post navigation bar in Divi. To do this, we are going to utilize Divi’s integrated alternatives to change a row into a sticky bar. We’ll utilize the post navigation module to develop the “previous post” and “next post” links. Plus, we are going include a post title as vibrant material to the middle of the bar that advises users of what post they are presently seeing which offers the navigation bar a good “previous, present, and future” aspect.

Let’s start!

Preview

Here is a glance at the style we’ll integrate in this tutorial.


< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-desktop.webm" type =" video/webm" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-desktop.mp4" type=" video/mp4" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-mobile.webm" type=" video/webm "> Download the Design

more Divi goodness and a complimentary Divi Design pack every Monday!

Merely enter your e-mail address listed below and click download if you’re currently on the list. You will not be” resubscribed” or get additional e-mails.< div

  1. class=” et_bloom_locked_container et_bloom_optin_1″ data-page_id =” 153863 “data-optin_id=” optin_1″ > data-list_id =” mailchimp_c886a2fc0a” data-current_optin_id=” optin_1 “>
  2. Download the Files
  3. < div class=" et_bloom_form_container with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field" >< div class=" et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline" > You have actually effectively subscribed.
  4. Please inspect your e-mail address to validate your membership and get access to complimentary weekly Divi design loads! How to Submit The FREE Design Template To import the totally free design template to
  5. the style contractor, follow these actions: Browse

divi sticky post navigation bar

to Divi > Style Home Builder. Click

the Mobility Icon. In the Mobility popup, choose the import tab. Pick the unzipped file formerly downloaded to be imported. Click the Import button. Click the edit icon to modify the imported design template.< img loading=" lazy" src =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-2.jpg" alt="divi sticky post navigation

bar “width=” 880″ height=” 595″ class=” with-border aligncenter size-full wp-image-153965″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-19.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-20.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-21.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Let’s

get to the tutorial, shall we? What You Required to Begin You can include this sticky post navigation bar to any blog site post design or design template in Divi, we are going to utilize a premade blog site post design template to speed up the procedure and get a dive start on the style. Set up and trigger the Divi Style if you have not yet. Import the Meal Package Post Design Template to Style Home Builder To begin, download the totally free post design template for Divi’s Meal Package Design Load. To do this, go to the post.< img loading=" lazy" class =" with-border aligncenter size-full wp-image-153866" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/blog.jpg" alt=" divi sticky post navigation bar" width=" 880" height=" 667 "srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/blog.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/blog-300x227.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/blog-768x582.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/blog-610x462.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Then enter your e-mail to download the zip file

.< img loading=" lazy" class =" with-border aligncenter size-full wp-image-153867" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/download-template.jpg" alt=" divi sticky post navigation bar" width=" 880" height=" 571" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/download-template.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/download-template-300x195.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/download-template-768x498.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/download-template-610x396.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > After that, unzip the file so that it is prepared for import. To import the file to

the style contractor, follow these actions: Browse to Divi >

Style Home builder. Click the Mobility Icon. In the Mobility popup, pick the import tab. Pick the unzipped file formerly downloaded to be imported.

  • Click the Import button. Click the edit icon to modify the imported design template.< img loading=" lazy "src= "https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-3.jpg" alt=" divi sticky post navigation bar

    divi sticky post navigation bar

    ” width=” 880″ height=” 628″ class=” with-border aligncenter size-full wp-image-153979″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-3.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-22.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-23.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-24.jpg 610w

    ” sizes=”( max-width: 880px )100vw, 880px” > Producing a Sticky Post Navigation Bar in Divi Part 1: Developing the Sticky Row To produce the sticky

    post navigation bar, we are going to utilize a three-column row as the sticky container for our post navigation links and post title. In the 2nd area of the design template design, include a

    divi sticky post navigation bar

    brand-new one-fourth half one-fourth column row under the row consisting of the

    post material.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153886" src =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-4.jpg" alt =" divi sticky post navigation bar" width= "880" height=" 535 "srcset =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-4.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-25.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-26.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-27.jpg 610w" sizes="( max-width: 880px )100vw, 880px" >

  • Row Settings Open the row settings. We require to include the sticky position to the row so

    that we can update upgrade design style choices the sticky state. Under the Advanced tab, upgrade the following: Sticky Position: Stay With Top and Bottom Leading Sticky Limitation: Area Bottom Sticky Limitation: Body Location With this sticky position, the sticky row will stay with the bottom of the internet browser window whenever area including the post material remains in view. As soon as the user scrolls past the real position of the sticky row, the row will stay stuck at the

    divi sticky post navigation bar

    top of the web browser window throughout the remainder of the post body location.

    • To ensure the columns do not stack on mobile, include the following customized CSS to the Main Component: display screen: flex

    divi sticky post navigation bar

    ; flex-wrap: nowrap; Align-items:;< img loading=" lazy" class =" with-border aligncenter

  • size-full wp-image-153882″ src=” https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar13.jpg” alt=” divi sticky

  • post navigation bar” width=” 880″ height=
  • ” 445″ srcset=” https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar13.jpg 880w
  • , https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar13-300×152.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar13-768×388.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar13-610×308.jpg 610w”
  • divi sticky post navigation bar

    sizes =”( max-width: 880px) 100vw, 880px” >

    Under the material tab, include a white background color to the row in the sticky state as follows: Background Color: none Background Color: #ffffff( sticky) < img loading=" lazy" class=" with-border aligncenter size-full wp-image-153884" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-6.jpg" alt =" divi sticky post navigation

    bar “width=” 880″ height =” 637″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-31.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-32.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-33.jpg 610w” sizes=”( max-width: 880px )100vw, 880px” > Under the style settings, upgrade the following: Usage Custom-made Rain Gutter Width: YES Seamless gutter Width:

    divi sticky post navigation bar

    1 Width: 100% Max Width: 100 %Cushioning: 0px leading,

    0px bottom< img loading= "lazy" class =" with-border aligncenter size-full wp-image-153883" src =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-7.jpg "alt =" divi sticky post navigation bar" width =" 880 "height=" 701" srcset =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-7.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-34.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-35.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-36.jpg 610w "sizes="( max-width: 880px) 100vw, 880px" > Conceal Middle Column on Tablet and Phone The middle column of the row will ultimately hold the vibrant post title which lets users understand what post they read. For a much better experience on mobile, we

    are going to conceal the middle column on tablet and

    phone. To conceal the column on mobile, open the settings for column

    divi sticky post navigation bar

    2( middle column), and upgrade the presence alternatives as follows:

    • Disable on: Phone, Tablet< img loading=" lazy "class=" with-border aligncenter size-full wp-image-153870" src =" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-8.jpg"
    • alt= “divi sticky post navigation bar” width=” 880″ height=” 696″ srcset=”

    divi sticky post navigation bar

    https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-8.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-37.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-38.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-39.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px “>

  • Part 2: Producing the Post Navigation Hyperlinks To open more style versatility for the post navigation, we are going to utilize 2 different post navigation modules. In the left column, we are going to include a post navigation
  • module that reveals just the previous post link. In the ideal column, we are going to include a post navigation

    divi sticky post navigation bar

    module that reveals just the next post link. Developing the Previous Post Link In column 1, include a brand-new post navigation module.< img loading =" lazy "class=" with-border aligncenter size-full wp-image-153881 "src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-9.jpg" alt= "divi sticky post navigation bar "width =" 879" height= "651" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-9.jpg 879w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-40.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-41.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-42.jpg 610w" sizes ="( max-width:

    879px) 100vw, 879px" > Open the post navigation settings, upgrade the material
    

    divi sticky post navigation bar

    tab choices as follows: Previous Link

    ( text): Prev Post Program Previous Post Link: YES Program Nex Post Link: NO Background Color: # 000000

    • Under the style tab, upgrade the following: Hyperlinks Typeface: Kumbh Sans Hyperlinks Typeface Weight: Strong Hyperlinks

    divi sticky post navigation bar

    • Font Style Design: TT Hyperlinks

    divi sticky post navigation bar

    Text Color: #ffffff Hyperlinks Text Size: 26px( desktop), 16px (tablet and phone) Hyperlinks Line Height: 1.3 em Cushioning

    divi sticky post navigation bar

    : 0.9 em top, 0.7 em bottom, 2em left, 2em< img loading=" lazy "class=" with-border aligncenter size-full wp-image-153879" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-11.jpg" alt= "divi sticky post navigation bar" width=" 880 "height=" 1008" srcset= "https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-11.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-46.jpg 262w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-47.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-48.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > Because we are concealing the middle column on mobile, the 2 columns that are left that will hold the navigation

    links can now each use up 50% of the web browser width on tablet and phone.

    divi sticky post navigation bar

    To make certain the navigation link covers 50% of the viewport, include the following customized CSS to the Hyperlinks CSS box for tablet view: screen: block; width:50 vw; Text-align:; float: none;< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153869" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-12.jpg" alt=" divi sticky post navigation bar" width=" 880" height=" 712" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-12.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-49.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-50.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-51.jpg 610w" sizes=" (max-width: 880px )100vw, 880px" > Producing the Next Post Link To produce the next post link, copy the post navigation module( with the previous post link) we simply developed and paste it to column 3( right column). Next, open the post navigation settings for the replicate module in the best column and upgrade the following material tab alternatives: Next Link: next post Program Previous Post Link: NO Program Next Post Link: YES< img loading=" lazy" class =" with-border aligncenter size-full wp-image-153878" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-13.jpg" alt=" divi sticky post navigation bar" width=" 880" height=" 679" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-13.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-52.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-53.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-54.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Background Color: #ffb 100< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153877" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-14.jpg" alt=" divi sticky post navigation bar" width =" 880" height =" 616" srcset= "https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-14.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-55.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-56.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-57.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > Under the style tab, upgrade the

    • link text color: Hyperlinks Text Color:

    # 000000< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153876" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-15.jpg" alt=" divi sticky post navigation bar" width=" 880" height=" 618" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-15.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-58.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-59.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-60.jpg 610w" sizes=" (max-width: 880px )100vw, 880px" > Part 3: Producing the Dynamic Post Title As soon as the 2 navigation links remain in location, we are all set to include the post title as vibrant material to the middle column. The concept is to provide the user a great tip of the post they read together with the choice to browse to the next post and the previous post. In the center column, include a brand-new text module.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153875" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-16.jpg" alt=" divi sticky post navigation bar" width=" 879" height=" 667" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-16.jpg 879w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-61.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-62.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-63.jpg 610w" sizes="( max-width: 879px) 100vw, 879px "> Under the Material tab, click the” Usage Dynamic Material” icon in the body location, and pick the Post/Archive Title.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-153874" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar5.jpg" alt=" divi sticky post navigation bar

    ” width =” 880″ height=” 539″ srcset =” https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar5.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar5-300×184.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar5-768×470.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar5-610×374.jpg 610w” sizes=”( max-width: 880px )100vw, 880px” > Once the vibrant post title is included, open the settings for the Post/Archive Title,

  • and upgrade the in the past material: Prior to:”
  • Reading: “Then conserve the modifications.< img loading=" lazy "class= "with-border aligncenter size-full wp-image-153873" src=
  • ” https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar4.jpg” alt =” divi sticky post navigation bar” width=” 880″ height=” 605″
  • srcset=” https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar4.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar4-300×206.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar4-768×528.jpg 768w
  • divi sticky post navigation bar

    • , https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/divi-sticky-post-navigation-bar4-610×419.jpg 610w” sizes =”(
    • max-width: 880px)
    • 100vw, 880px “>

    divi sticky post navigation bar

    Under the style tab, upgrade the following: Text Font style: Kumbh Sans Text Typeface Weight: Vibrant Text Typeface Design: TT Text Color:


    transparent (desktop), # 000000 (sticky) Text Size: 16px Text Letter Spacing: 1px Text Line Height: 1.3 em Text Positioning:

    < img loading= "lazy" class=" with-border aligncenter size-full wp-image-153872" src=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-17.jpg" alt= "divi sticky post navigation bar "width=" 880" height =" 1025" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-17.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-64.jpg 258w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-65.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/06/how-to-produce-a-sticky-post-navigation-bar-in-divi-66.jpg 610w" sizes= "( max-width: 880px) 100vw, 880px" > Max Width: 96 % Module Positioning: Cushioning: 0.5 em top, 0.5 em bottom Outcome < source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-desktop.mp4" type=" video/mp4 ">< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-mobile.webm" type =" video/webm" >< source src= "https://www.elegantthemes.com/blog/wp-content/uploads/2021/06/sticky-post-nav-mobile.mp4" type= "video/mp4" > Last Ideas In this tutorial, we demonstrated how simple it is to develop a sticky post navigation bar for a post design template in Divi. The sticky performance of the bar/row can likewise be changed quickly with Divi’s integrated choices. You can restrict the sticky state to an area or pick to stick it just at

    the top leading bottom of the browser internet browser. Ideally, this will can be found in helpful for your next blog website.

    I anticipate speaking with you in the
    remarks. Cheers!

  • Leave a Reply

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