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 Divi Ultimate header style 1 help!

Discussion in 'Basic Support Forum' started by Strawberry Hire, Oct 13, 2020.

  1. Strawberry Hire

    Strawberry Hire New Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi all,

    I'm hoping someone will be able to help with this query, I am using Divi ultimate header & header style 1 on my website https://partyparcels.co.uk

    I am trying to make the logo bigger and to have it overlap both header bars when the user is at the top of the page & then when the user scrolls down I want the logo to shrink and stay in the sticky bar, I was watching a tutorial about this which used css but I couldn't find the code the guy was talking about to edit?

    Also, this is for the desktop version of my website as the mobile version still uses the standard Divi mobile header because I haven't figured out how to make this header for mobile yet.

    Thanks in advance. :)
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    That would require a different structure. Instead of explaining it, I re-created the design for you & export it in .json file.

    Here's what you need to do:
    1. Download the attached .json file.
    2. Import it in WP Admin > Divi > Divi Library (named as Party Parcels)
    3. Choose it in Theme Customizer settings.
    4. And further customize it in WP Admin > Divi > DU Header - Library (named as Party Parcels)
     

    Attached Files:

  3. Strawberry Hire

    Strawberry Hire New Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin


    Hi, thank you so much for taking the time to recreate this for me & upload the json file I very much appreciate it!

    My colleague now would like me to make the logo & the black bar bigger when at the top of the page and then when the black bar becomes sticky for it to remain the same size & so the logo is also bigger when it's sticky ( I hope this makes sense)

    I was just wondering if I change the spacing settings in both the blue and black bars section settings will the logo adapt to the correct size automatically or will I need to change some settings in there also? Or will this completely mess up any code you have put in there?

    I have attached a picture so you can see what I'm talking about (although we have changed the logo now)

    Thanks again for your help!
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To make the black bar bigger, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **Adjust 38px to fit your need.

    And to change the sticky logo size, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **Adjust it to fit you need.

    As for non sticky logo at the top, you may adjust the positioning by going to the Image module settings > Advanced > Position > Vertical Offset
     
  5. Strawberry Hire

    Strawberry Hire New Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi,

    Thanks again for the swift reply, the above worked perfectly so thank you again for all your help :)
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo