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

Transparent Header

Discussion in 'Basic Support Forum' started by Asim Ismail Bhuta, Jun 3, 2019.

  1. Asim Ismail Bhuta

    Asim Ismail Bhuta New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Hi,

    I am trying to create a different header for specific pages, but when I set the background of the whole section to transparent the background of the previous section doesn't get shifted up like it does on another page.

    E.g. www.dare-liberate.co.uk/home-main works perfectly but www.dare-liberate.co.uk/shop doesn't.

    Currently I have set the margin of the next section to -300px and padding to 300px as a workaround.

    Is there a way to make this work without adding a negative margin and padding to the next section?

    Bw,

    Asim
     
    #1 Asim Ismail Bhuta, Jun 3, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    For your homepage, it seems like you're using some custom CSS to make it work. Taken from your CSS & tweak it to work globally:
    Code:
    Log In or Sign Up to view this code.
    Try to add it in Divi > Theme Options > Custom CSS.
     
    #2 Divi.Help Pro Support, Jun 3, 2019
  3. Asim Ismail Bhuta

    Asim Ismail Bhuta New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Hi,

    That doesn't quite work as intended because padding is required to push the content in the et-main area down by the same amount it was pushed up so I would still need padding-top:370px (370px because I have since increased the size of the logo thus height of the header).

    Taking a look to see what is making it work on the home-main page.

    Bw,

    Asim
     
    #3 Asim Ismail Bhuta, Jun 3, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  4. Asim Ismail Bhuta

    Asim Ismail Bhuta New Member
    Divi Ultimate Blog Plugin Divi Ultimate Header Plugin

    Think I have it figured out. Home-main doesn't have content in the first section, so it doesn't require an internal padding to realign the content.

    Was hoping there was a better solution as for pages that will use a different header height, the immediate section thereafter would require a margin and then a padding or as above the et-main-area is positioed to top and then an internal padding is introduced.
     
    #4 Asim Ismail Bhuta, Jun 3, 2019
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    From what I see, you haven't added the above CSS in Divi > Theme Options > Custom CSS. By using the above method, the custom header should now be laying on top of the content area on every page. And you just need to assign some padding top for the section below to prevent content overlapping. There's no need for negative margin.

    Currently, our custom header doesn't have the transparent menu feature. Might consider that for future version.
    **For the above CSS method, I just took it from your homepage.
     
    #5 Divi.Help Pro Support, Jun 3, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
(You must log in or sign up to post here.)