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

Top-header box-shadow CSS constantly overridden by CSS from index.html

Discussion in 'Free Divi Community Forum' started by Philip, Mar 15, 2018.

  1. Philip

    Philip New Member

    Hi everyone

    I am trying to add a nice box-shadow to my (fixed) top-header. Actually, I thought that was quite straightforward - just add the following snippet to your child-theme:

    .et-fixed-header#main-header {
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    }

    (I added the !important tags in a state of advanced dispair....). Turns out that does not work. That CSS is constantly overridden by a small snippet that "comes from nowhere":

    .et-fixed-header#main-header {
    box-shadow: none!important;
    }

    What a nasty little bastard! And I could not figure out where it comes from. It keeps returning even after I deleted all possible caches and temporarily stored stuff (also locally stored stuff). The source if given by (index):115 through Chrome Inspect. When clicking on that link I can see that it is an index.html file (<!DOCTYPE html>) where line 115 begins as follows: <style id="et-divi-customizer-global-cached-inline-styles">body{color:#000000}h1,h2,h3,h4,h5,h6{color:#000000} [...] Much further to the right of that line I can see the little bastard: .et-fixed-header#main-header{box-shadow:none!important}.

    Any suggestions on how to get rid of that in order to simply show that box-shadow (which I can see works properly when I manually deactivate the little bastard through Chrome Inspect). A work-in-progress version of our site can be seen at archai.xyz.

    Thanks a lot, Philip
     

    Attached Files:

    #1 Philip, Mar 15, 2018
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    What about this:

    #page-container .et-fixed-header#main-header {
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.45)!important;
    }
     
    #2 Divi.Help, Mar 15, 2018
    Taulant likes this.
  3. Taulant

    Taulant New Member

    "#page-container" did the thing for me! Thank you! I used it on a CTA button in the fixed header, the active link color needed to be in another color than the one it was "stuck" on.

    My superduper code now goes like this: "#page-container .et-fixed-header #top-menu .CTA_button a {"

    Thanks
    Taulant
     
    #3 Taulant, Jan 9, 2019
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
(You must log in or sign up to post here.)