[Resolved] Sticky Menu Color for Mobile Version

Home Forums Support Sticky Menu Color for Mobile Version

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1499326
    Michelle

    Hi. Currently my header has the preset colors (bg: #f2f1ed and text #25940C) and those colors show perfectly in the Desktop and Tablet view. However, in the mobile view the menu first shows the links with a with text on a grayish-like background and once you start scrolling down the sticky menu kicks in with the correct color sequence of (bg: #f2f1ed and text #25940C). I’ve looked all over the customized sections to see were I can correct this with no luck in sight. Could someone please point me in the right direction as I’ve clearly overlooked the correct section. Thank you.

    #1499544
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so i can see the issue?
    You can use the Private Information box.

    #1500515
    Michelle

    Hi! Not sure if my response to your question was received, as I do not see it listed. I’ve added the URL in the “Private Information” box.

    Since submitting my Thread, I’ve played around with the color scheme (primary and secondary navigation), added a new menu, removed/added again the sticky navigation, and cleared the cache and cookies on my PC, mobile and tablet and still no luck.

    #1500617
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify: You want the initial header state to have the same color as the sticky header state?

    …once you start scrolling down the sticky menu kicks in with the correct color sequence of (bg: #f2f1ed and text #25940C).

    I’ve checked your site and its actually the other way around. The toggle button on sticky header state had a background of #25940C (green) and text color of #f2f1ed (grey/beige?) as shown here:
    https://share.getcloudapp.com/d5upOWqq

    If you want the inverse of this, you can try this CSS:

    @media (max-width:768px){
    .mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
        background-color: #f2f1ed;
        color: #25940C;
    }
    }

    or if its the inverse, just swap the value between color: and background-color:.

    A wise man once said:
    "Have you cleared your cache?"

    #1500623
    Michelle

    Hi Elvin:
    Thank you for the CSS. That worked like a charm. I did clear the cache and cookies on my PC/mobile/tab and even viewed on another PC and laptop and was still showing white text with the grayish background.

    #1500626
    Elvin
    Staff
    Customer Support

    Do you want the same color to be applied on the sticky header state as well?

    If so, try adding this too:

    #sticky-navigation button.menu-toggle {
        background-color: #f2f1ed;
        color: #25940C;
    }
    
    #sticky-navigation button.menu-toggle:hover, button.menu-toggle:focus {
        color: #25940C;
    }

    Adding this should override the green background set by elementor’s CSS.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.