1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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 Mobile Menu help

Discussion in 'Free Divi Community Forum' started by BrianYos, Jan 13, 2021.

  1. BrianYos

    BrianYos New Member

    Hi,
    I'm stumped on some mobile menu CSS that I've implemented, and I'm pretty new to things here.
    I used part of a snippet I found on this blog (it was #7 from this page: https://www.creativechildthemes.com...4_0fqrUEM89NgOsxMr7crr0X-03qxUrZcruS7r-ImhrgE) to spruce up my mobile menu.
    I wanted to include the main logo on my mobile menu dropdown, but can't figure out how to add it.
    I've tried adding #logo position and z-index to this snippet, but I'm missing something. Can anyone help?
    This is the site I'm working on:
    https://scenicvows.com
    Thanks!
     
    #1 BrianYos, Jan 13, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  2. Jovenne Naldrey Sapuay

    Jovenne Naldrey Sapuay New Member

    Hey Brian - Is this where you want the logo to appear? See screenshot. ~Jovenne
     

    Attached Files:

    #2 Jovenne Naldrey Sapuay, Jan 13, 2021
  3. BrianYos

    BrianYos New Member

    Yes, exactly. Can you tell me how you achieved this?
     
    #3 BrianYos, Jan 13, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  4. BrianYos

    BrianYos New Member

    I'd like to make that a clickable link to the home page as well. (Like it does on the desktop)
     
    #4 BrianYos, Jan 13, 2021
  5. Jovenne Naldrey Sapuay

    Jovenne Naldrey Sapuay New Member

    Go to Appearance > Menus and select Menu dropdown for your Mobile menus and then add the "Home Link" in there but remove the Navigation Label. And then add this CSS in your style.css:

    .et_mobile_menu li.menu-item:first-child {
    background-image: url("/wp-content/uploads/2020/03/SV_Logo_White.png");
    background-size: cover;
    width: 104px;
    height: 100px;
    margin: 0 auto;
    }
     
    #5 Jovenne Naldrey Sapuay, Jan 13, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  6. BrianYos

    BrianYos New Member

    I tried your instructions and it didn't work out. I first tried to add a home link, but it would not let me add it without any navigation label. I added the CSS and it put the logo over top of the next menu item down (How It Works).
    Then I tried again, this time for the navigation label I just used a "space", and it seemed to work. Only thing is that when the "home link" is active, the text HOME is under the logo in the active link color.
    I've removed the CSS and the home link in the meantime.
     
    #6 BrianYos, Jan 13, 2021
  7. Jovenne Naldrey Sapuay

    Jovenne Naldrey Sapuay New Member

    Instead of "space" add   into the Home navigation label, then add this css:

    .et_mobile_menu li.menu-item:first-child a {
    background-image: url("/wp-content/uploads/2020/03/SV_Logo_White.png");
    background-size: cover;
    display: block;
    width: 104px;
    height: 100px;
    margin: 0 auto;
    }
     
    #7 Jovenne Naldrey Sapuay, Jan 13, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  8. BrianYos

    BrianYos New Member

     
    #8 BrianYos, Jan 14, 2021
    Jovenne Naldrey Sapuay likes this.
(You must log in or sign up to post here.)