1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Sticky header

Discussion in 'Basic Support Forum' started by Mark Sing, Apr 19, 2018.

  1. Mark Sing

    Mark Sing New Member

    Hello,

    I'm using the Header Style 1 - https://header1.diviultimate.com/

    My question is about 'Sticky header' when scrolling down.

    I would also like the top section (the logo and the address, office times and email blurb row) to be also "Sticky" along with the full width menu below.

    Can you please let me know how to achieve that?

    Thanks very much,
    Mark


    Screen Shot 2018-04-20 at 1.54.33 PM.jpg
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    It's a bit tricky to achieve that. Try the below:

    Step 1:
    Add free-sticky CSS Class to the top section.

    Step 2:
    Change the 121px to your top section height. As for the 153px, change it to your top section height + 32px.
    Code:
    .free-du-plugin-header .free-sticky-wrapper .et_section_regular:not(.et_pb_fullwidth_section) {
        position: fixed!important;
        width: 100%!important;
        height: 121px!important;
    }
    .free-du-plugin-header .free-sticky-wrapper .et_pb_fullwidth_section {
        position: fixed!important;
        width: 100%!important;
        top: 121px!important;
    }
    .admin-bar .free-du-plugin-header .free-sticky-wrapper .et_pb_fullwidth_section {
        top: 153px!important;
    }
    It should work then.
     
    Mark Sing likes this.
  3. Mark Sing

    Mark Sing New Member

    BEAUTIFUL!!! 100 Likes guys! It's just what I wanted to achieved. Thank you very much for the code! Really appreciate it. Great work!
    Thanks very much again!
     
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More