1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi.Help Pro One-Page Layouts - Beautifully crafted Divi layouts for you to kick start Divi sites.
View All Pro One-Page Layouts
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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Divi Header Style #12 with hamburger menu

Discussion in 'Basic Support Forum' started by Mike86, Nov 27, 2020.

  1. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to enable this option: Theme Customizer > Divi Ultimate Header Plugin > Vertical Navigation > Always hide vertical navigation & show hamburger menu
     
  3. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Thanks for the quick reply!

    I did that but there is still some weird "No results" above the menu. (please see the attachment image)

    How could I get rid of that "No results" thing?
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    It's because it's a post slider module. You will need to publish at least one blog posts to make it appear correctly.

    If you do not plan to have blog post for your site, then you will need to edit the custom header in WP Admin > Divi > DU Header - Library & delete the post slider module.
     
  5. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Ok thanks!

    I deleted the black upper row as I don't need it.

    Now the header looks too big in the site. What did I do wrong?
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    It's the Divi Static CSS File Cache. Try to clear the cache at: WP Admin > Divi > Theme Options > Builder > Advanced > Static CSS File Generation > Clear
     
  7. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Now it is working. Thanks!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  8. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    I have one more question if that's okay :)

    How could I make that header style #12 transparent? Now it has white background color.
     
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    And set your menu section settings to have transparent background.
     
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  10. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Thanks for the code! My header is now transparent but if you see the image named "header with code" you can see that the header and heading goes on top of each other.

    How could I add some padding or margin to the header so that won't happen?
     

    Attached Files:

  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If you wish to make the header not transparent on single blog posts page & archive page, then try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  12. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Thanks!

    Do you know how I could remove that shadow line under the header?
     

    Attached Files:

  13. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Go to the Section Settings > Advanced > CSS Class & add: free-sticky-no-shadow

    You will also need to go to the Section Settings > Design > Box shadow & set it to be none.
     
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
  14. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    I did like you asked and inserted the CSS Class: free-sticky-no-shadow and set the Box Shadow to be none.

    Now the header is no longer sticky. How can I get rid of the shadow but still have the menu to be sticky?

    This was the CSS Class earlier: free-sticky free-sticky-mobile-show free-vertical-navigation-breakpoint-show
     

    Attached Files:

  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You will need to add the CSS Class on top of the existing ones: free-sticky free-sticky-mobile-show free-vertical-navigation-breakpoint-show free-sticky-no-shadow
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  16. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Thanks!

    Where can I change the hamburger menu icon color?
     
    #16 Mike86, Nov 30, 2020
    Last edited: Nov 30, 2020
  17. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can change it in Theme Customizer > Divi Ultimate Header Plugin > Vertical Navigation > Hamburger Menu Color
     
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  18. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Hello,

    How do I add Cart Icon to Header Menu Style 12? Next to the hamburger menu icon.

    Thanks!

    Edit:
    Here are my Header settings:
    https://imgur.com/a/dCOZzPI
     
  19. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to download the attached json file. And import it in Divi Library. And lastly, go to edit your custom header style > click add new module under logo image module > Add From Library > Cart Icon
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  20. Mike86

    Mike86 Member
    Divi Ultimate Header Plugin

    Thanks but I would like to add the cart icon next to the hamburger menu icon. So the cart icon would be visible without clicking the menu open.

    How could I do that?