Return to previous page

Editing the mobile menu with CSS - by Jarkko

This topic has 4 replies, 2 voices, and was last updated 7 years, 1 months ago ago by Rose Tyler

  • Avatar: Laatusuklaa
    Jarkko
    Participant
    September 29, 2017 at 05:06

    The mobile menu on my site has a dark grey background and almost similarly dark text on it, so the text is barely visible on any phone. How would I change both the background coloro and the font color?
    https://prnt.sc/gr0zms

    How would I make this change happen on only my mobile device: https://prntscr.com/gr11o2 ?

    #173734 Copied
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 29, 2017 at 08:15

    Hello,

    1. Add this code in Global custom css:

    .st-menu-open .mobile-menu-block > .mobile-menu-block.st-menu {
    background-color: rgba(0, 0, 255, 0.29);
}
.mobile-nav-heading.close-mobile-nav {
    background-color: red;
    color: white;
}
.mobile-nav a, .mobile-nav-heading {
    color: white !important;
}
.mobile-nav .links {
    border-top: 1px solid white;
}

    2. You may add this code in Custom css for mobile:

    .header-custom-block {
    display: none !important;
}

    Regards

    #173750 Copied
    Avatar: Laatusuklaa
    Jarkko
    Participant
    September 29, 2017 at 09:09

    Thanks Rose! What would I do without your support?!? 😀

    #173761 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 29, 2017 at 09:15

    You’re welcome! 🙂

    Regards

    #173765 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Editing the mobile menu with CSS’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Finances – WordPress WooCommerce Theme
lazy-placeholder
Marseille 03 – WordPress WooCommerce Theme
lazy-placeholder
Zoo Shop – WooCommerce Theme
lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Burger Store – WordPress WooCommerce Theme
lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.