1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Keeping Divi Fixed top Header & Removing shadow

Discussion in 'Basic Support Forum' started by Eugenie, Apr 5, 2019.

  1. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    Got two questions about header:

    1. How can I retain the original Divi Fixed top header?
    2. How do I remove the shadow from the header when scrolling?

    Screen Shot 2019-04-05 at 17.09.47.png

    Thanks.
     
    #1 Eugenie, Apr 5, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  2. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    Update: I found that style 6 doesn't have the shadow, so that problem is solved. Would still be great to know how to keep the original Divi fixed top header.

    Thanks
     
    #2 Eugenie, Apr 5, 2019
  3. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    1. First, you need to add the below CSS in Divi > Theme Options > Custom CSS to show the original Divi top header:
    Code:
    Log In or Sign Up to view this code.
    **Adjust the padding top to be the height of your original Divi top header.

    If the original Divi top header is not fixed / sticky, then you're good to go. But if you want both original Divi top header & your custom menu to be fixed / sticky on scroll, it will be much more complicated. There are few more steps to go. See below:

    2. Go to Divi > Theme Options > Integration > Body Code & paste the below:
    Code:
    Log In or Sign Up to view this code.
    **Adjust the 50 to be the height of your original Divi top header.
    **Remember to enable the body code as well.

    3. Then go to edit the custom header in Divi > DU Header - Library.

    4. For the sticky custom menu, there will be a CSS Class free-sticky in the section / row settings. Just change it to free-sticky-2 & done.

    We need to go through the above is because by default our custom fixed menu is set to show on top of the screen. But now you wish to use the original Divi fixed top header on the top. So, we need to additional add another code to adjust the position of the sticky elements.

    Let me know if it works.
     
    #3 Divi.Help Pro Support, Apr 5, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  4. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    Thanks. I need to know how to remove the shadow after all. I made many modifications to style 6 and they don't seem to be working well in iPad. Probably better to use a simpler style and just remove the shadow that appears when I start scrolling.

    Thanks.
     
    #4 Eugenie, Apr 5, 2019
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    In the section / row settings of the sticky menu, you will have free-sticky CSS Class. You just need to additionally add this to the CSS Class: free-sticky-no-shadow
     
    #5 Divi.Help Pro Support, Apr 5, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  6. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    Got It. Thanks.
     
    #6 Eugenie, Apr 5, 2019
  7. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    Just tried this. The shadow disappears but the header doesn't stay fixed.
     
    #7 Eugenie, Apr 6, 2019
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  8. Eugenie

    Eugenie Member
    Divi Ultimate Header Plugin

    OK, just fixed it. I pasted the CSS class from style 6 and it worked:

    free-sticky free-sticky-no-shadow free-regular-menu

    Thanks.
     
    #8 Eugenie, Apr 6, 2019
(You must log in or sign up to post here.)