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

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 Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  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 Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  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 Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  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.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites: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 Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  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 Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  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 Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination: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 Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  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.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  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 Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  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?