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 CTA button on mobile header

Discussion in 'Free Divi Community Forum' started by Al Adano, Apr 15, 2020.

  1. Al Adano

    Al Adano New Member

    Been searching for a while how to implement CTA button on mobile header next to hamburger just like it's done here:

    https://twomenandatruck.com

    Of course done it on desktop and managed to add as a ::before element to mobile, but could not add a css class id to ::before.

    Please advise if possible.

    P.S. at the same link hamburger has "MENU" word below which is also cool and would really appreciate if someone pointed how it can be implemented.

    Best regards
     
    #1 Al Adano, Apr 15, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You can add the CTA button by building your header using Divi Theme Builder.

    Here's a sample mobile header design + CTA button: https://www.elegantthemes.com/blog/...llapsing-nested-menu-with-divis-theme-builder
     
    #2 Divi.Help, Apr 16, 2020
  3. Al Adano

    Al Adano New Member

    Thank you for your prompt respond.

    However, since I've already designed and built the desirable version for desktop without theme builder, was trying to find the solution to get this CTA on mobile built apart of the whole thing..
     
    #3 Al Adano, Apr 16, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try the below code in Divi > Theme Options > Integration > Body Code:
    Code:
    Log In or Sign Up to view this code.
    And if you wish to hide it in desktop, then use the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #4 Divi.Help, Apr 16, 2020
    Al Adano likes this.
  5. Al Adano

    Al Adano New Member

    This is just awesome!
    thank you so much!
     
    #5 Al Adano, Apr 16, 2020
    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. Rolandx

    Rolandx New Member



    Hi I have used your code , and this is awesome!!!!
    could you help me please with one thing? When someone will use my Wordpress site with English the code is ok, but on German I need to change the " Button" text and link. Could u help me with that? Im using polylang for language switcher . Thankyou!!!
     
    #6 Rolandx, Jul 5, 2021
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    Our solution involves jQuery code. But I believe that if you need to set a polylang condition, it must be in PHP.

    Meaning you will need to edit the header.php file in your child theme to achieve what you want.
     
    #7 Divi.Help, Jul 8, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  8. Rolandx

    Rolandx New Member

    Thanks I have solved it with a simple display none css for evry language variation . But thank you for the fast reply
     
    #8 Rolandx, Jul 8, 2021
  9. iFocus Marketing

    iFocus Marketing New Member

    Hello, I know this post is from 2024, but I tried implementing this code to create an icon next to my hamburger menu. So I slightly modified your code:

    Code:
    Log In or Sign Up to view this code.
    This is almost working, but the link <a> isn't actually clickable. The webpage is https://durrievision.com/ and the icon is hidden on desktop, so you may have to shrink your window in order to inspect it.
     
    #9 iFocus Marketing, Oct 11, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  10. Divi Booster

    Divi Booster Divi Expert

    Hey, iFocus,

    The problem seems to be that the element containing the logo extends over the top of the #et-top-navigation element and is hence blocking clicks on the phone link. You can fix this by adjusting the z-index of the elements to layer the top navigation element (and phone link) in front of the logo container instead of behind it. This CSS should do it:

    Code:
    Log In or Sign Up to view this code.
    Hope that helps!
     
    #10 Divi Booster, Oct 12, 2024
(You must log in or sign up to post here.)