1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved Mobile Menu help

Discussion in 'Free Divi Community Forum' started by BrianYos, Jan 13, 2021 at 1:17 PM.

  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. AD Add more variety for your Divi header (12 premade styles): https://header.diviultimate.com/
  2. Hey Brian - Is this where you want the logo to appear? See screenshot. ~Jovenne
     

    Attached Files:

  3. BrianYos

    BrianYos New Member

    Yes, exactly. Can you tell me how you achieved this?
     
    1. AD Custom global Divi footer (20 premade styles) + Revealing footer effect: https://footer.diviultimate.com/
  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)
     
  5. 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;
    }
     
    1. AD Instantly add 30+ custom Divi Modules. Free version available: https://divi.help/link-forums/divi-supreme.143/
  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.
     
  7. 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;
    }
     
    1. AD Easily add Mega Menu for your Divi site: https://divi.help/link-forums/divi-mega-pro.149/
  8. Golf Clubs Advisor

    Golf Clubs Advisor New Member

    See Your mobile setting in order to understand your monile menu.
     
  9. BrianYos

    BrianYos New Member

     
    1. AD Free Divi premade layouts & sections for download: https://divi.help/link-forums/divi-den-freebies.145/