Okay
  Public Ticket #2261145
Mobile Menu: Auto-close + Background Color
Closed

Comments

  •  5
    g_s started the conversation

    Hello Gabriel

    Bought this theme a second time to set up a website for my brother, we really love it! I have two questions regarding the menu on mobile:

    - If you tap on the CTA, the menu doesn't close by itself. If you close it and reopen it, the CTA becomes invisible ie. stay colored not matter where you are on the page. Any way to fix this?

    - Where / How can I change the background color or the menu?

    Thanks!

    Gautier

    [Screenshot on iOS Safari, iPhone 8]

    Attached files:  IMG_6299.PNG

  •  550
    Gabriel replied

    Hi, the cta button issue is now fixed and will be included in the next update. To patch this on your end, replace wp-content/plugins/hybrid-composer/scripts/script.js

    As for the background color, it uses main and secondary colors for a gradient. You can change it by adding this to Theme Options - Customizations - CSS Global:

    @media (max-width: 992px) {
    .navbar-collapse {
        background-image: linear-gradient( 135deg, #E91E63 0%, #3F51B5 100%);
    }
    }

    Attached files:  script.js.zip

  •  5
    g_s replied

    Hey Gabriel,

    Thanks a lot for the fix, the menu closes now, in Safari at least :) In Chrome iOS, the issue is still there. There's also the issue that as soon as you scroll down (past the first header), the CTA in the menu changes color and matches with the background, which makes it almost invisible. Are you able to reproduce the issue?

    Thanks and best,

    Gautier

  •  550
    Gabriel replied

    Hi Gautier, just tested with Chrome iOS and it works good. Try clearing your cache, see how it works.

    About the color, this should fix it:

    a.menu-cta.scroll-to.btn-text:hover {
        color: #fff !important;
    }
  •  5
    g_s replied

    Hi Gabriel, thanks a lot for the reply! I added the code to the CSS Customizations, the menu still appears as following:

    Attached files:  IMG_5059F19C7874-1.jpeg

  •  550
    Gabriel replied

    Ok I see. You also need to encapsulate the previous code into the media query. I've also added a code to fix this last issue, so everything from this ticket should look like this:

    @media (max-width: 992px) {
    .navbar-collapse {
        background-image: linear-gradient( 135deg, #E91E63 0%, #3F51B5 100%);
    }
    a.menu-cta.scroll-to.btn-text, a.menu-cta.scroll-to.btn-text:hover {
        color: #fff !important;
    }
    }
  •  5
    g_s replied

    Perfect, thanks!