1. CYBER MONDAY SALE Get Divi.Help Pro Membership @ $99 / lifetime & instantly gain access to all our Divi.Help Pro Membership perks.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.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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

DIVI Header #7

Discussion in 'Basic Support Forum' started by laurenbach, Nov 30, 2023.

  1. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    Hi DIVI Header Support-
    Is there a way in the mobile view for the header to turn off the Logo and default mobile 3 line menu row that the DIVI Theme generates for all mobile menus and simply insert the logo on the same row dark teal row that has the Book Now? I am thinking I will remove the social media icons, add a white logo to the left of the book now button and add the 3 white lines (mobile menu) to the right of book now is that possible in just the mobile view?

    Here is the link to the site - https://iluminarnosara.com/

    Please advise. Lauren B.
     
    #1 laurenbach, Nov 30, 2023
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in WP Admin > Divi > Theme Options > Custom CSS to hide the mobile menu:
    Code:
    Log In or Sign Up to view this code.
    Then you will need to edit your Divi Ultimate Header layout to create the design that you want.

    Basically, you just need to add a new section with teal background color & set the section to be visible on mobile & tablet only.

    Then add a 3-column row. And for the first column, add your logo image module. And second column add your button module. And third column, add a menu module. All the modules set margin botom 0.

    And set the Section Settings padding top & bottom to be 0.

    And go to the Row Settings > Advanced > Custom CSS > Main Element & add:
    Code:
    Log In or Sign Up to view this code.
    By doing so, the 3 columns will be side by side on mobile.

    And lastly, add the below CSS in Divi > Theme Options > Custom CSS to make the menu open in fullwidth:
    Code:
    Log In or Sign Up to view this code.
    Then just style it to fit your need.
     
    #2 Divi.Help Pro Support, Nov 30, 2023
(You must log in or sign up to post here.)