Home>Support>Customize Mobile Menu

Customize Mobile Menu

I searched support for how to customize the mobile menu, I want the menu colors to be the same as on the PC.
I found this CSS snippet in a thread and put it in the Customize CSS in Appearance. I also updated the CSS editor.

Still, I could not figure out how to change the mobile menu background & hover colors, etc…

Here is the snippet I inserted:
/* Mobile Nav */

.mobile-nav-frame {
background: rgba(255,255,255,0.5) !important;
}

.mobile-nav-frame .title h3 {
color: black !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important;
}

.mobile-nav-frame ul {
background: #ffffff !important;
border: 1px solid #111 !important;
}

.mobile-nav-frame ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-frame ul li a.link {
color: #3ab2c0 !important;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important;
}

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Hi Lenny

    Thanks for your question.

    Unfortunately, the mobile menu doesn’t have Customizer settings at the moment. The Custom CSS rules above can be used to change the menu’s colors. Did you have a chance to change the color values? The above values are default, without any change the above rules wouldn’t reflect any changes.

    /* Mobile Nav */
    
    .mobile-nav-frame {
    background: rgba(34,34,34,0.5) !important;
    }
    
    .mobile-nav-frame .title h3 {
    color: white !important;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important;
    }
    
    .mobile-nav-frame ul {
    background: #212121 !important;
    border: 1px solid #111 !important;
    }
    
    .mobile-nav-frame ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .mobile-nav-frame ul li a.link {
    color: #F3F3F3 !important;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important;
    }
    

    For example, if #F3F3F3 isn’t changed, no change will show because that’s the color already being used.

    rgba is a way of stating color and opacity, here is more on that:

    http://www.w3schools.com/cssref/css_colors_legal.asp

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More