[Support request] how to change mobile menu background color?

Home Forums Support [Support request] how to change mobile menu background color?

Home Forums Support how to change mobile menu background color?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1681553
    Rafał

    /* rounded widgets */

    .separate-containers .inside-article, .sidebar .widget {
    border-radius: 10px;
    }

    /* sticky menu white bg */
    .main-navigation.navigation-stick,
    .main-navigation.navigation-stick ul ul {
    background-color: #fff;
    }

    .main-navigation.navigation-stick .main-nav ul li a,
    .navigation-stick .menu-toggle {
    color: #000;
    }

    .main-navigation.navigation-stick .main-nav ul li:hover>a,
    .main-navigation.navigation-stick .main-nav ul li:focus>a,
    .main-navigation.navigation-stick .main-nav ul li.sfHover>a,
    .main-navigation.navigation-stick .main-nav ul li[class*=”current-menu-“]>a {
    background-color: #fff;
    color: #9147ff;
    }

    /* underline menu */

    .main-navigation li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: “”;
    }

    .main-navigation .main-nav ul li[class*=”current-menu-“] > a:after,
    .main-navigation .main-nav ul li:hover > a:after,
    .main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 1px solid #fff;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    /* underline sticky menu */
    .main-navigation.navigation-stick li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: “”;
    }

    .main-navigation.navigation-stick .main-nav ul li[class*=”current-menu-“] > a:after,
    .main-navigation.navigation-stick .main-nav ul li:hover > a:after,
    .main-navigation.navigation-stick .main-nav ul li.sfHover:hover > a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 1px solid #9147ff;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    This is my CSS

    my normal menu looks like that – https://imgur.com/yjt6GDA
    my sticky menu looks like that -https://imgur.com/owY6Xlx

    (underline is on the hover and current for sticky)

    IDK how to solve mobile menu – https://imgur.com/qHjAAYX

    Looks like canvas do not work

    #1681659
    David
    Staff
    Customer Support

    Hi there,

    do you want the Mobile Header and the Mobile Menu Drop down to have a solid color ?

    #1681749
    Rafał

    only mobile menu drop down I think

    my “normal menu” and “my sticky menu” from first post looks fine for me

    I have issue only with dropdown on mobile

    #1682018
    David
    Staff
    Customer Support

    You can use this CSS to do that:

    @media (max-width: 768px) {
      .has-inline-mobile-toggle #site-navigation.toggled {
          background-color: #f00 !important;
      }
    }
    #1682039
    Rafał

    awesome

    #1682071
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.