1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

DIVI Header Mobile Menu Only

Discussion in 'Basic Support Forum' started by laurenbach, Dec 10, 2022.

  1. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    Hi DIVI Header support-
    I want to change the background color from white to another color only in the Mobile menu not the desktop or tablet. I have this custom CSS and it is not working is there different CSS I should use see this from my past notes and it used to work:

    @Media (max-width: 980px){

    .et_header_style_centered .et_mobile_menu {

    background: #911105;

    }

    The website is https://cicroofingcarpentry.com/.

    Also I had custom CSS to make the logo larger in the mobile view as well but that is not working either see here:

    .et_header_style_centered #logo, .et_header_style_centered .logo_container {

    max-height: 150px!important;

    }

    Let me know. Thanks, Lauren B.
     
    #1 laurenbach, Dec 10, 2022
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  2. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    I think I am having a caching issue on my phone as I can see it in the desktop view. Can you tell me is there custom CSS for changing the light grey mobile menu bar to black only on the mobile view?
     
    #2 laurenbach, Dec 10, 2022
  3. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Was not able to view your site due to access denied by country. But you may try the below CSS:
    Code:
    @media screen and (max-width: 980px) {
    #main-header {
        background: #222!important;
    }
}
    Though, you should should be able to set the color in Theme Customizer > Mobile Styles > Mobile Menu > Background Color
     
    #3 Divi.Help Pro Support, Dec 11, 2022
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  4. laurenbach

    laurenbach Member
    Divi Ultimate Header Plugin

    I was just referring to the bar that says "Select Page" not entire background header color.
     
    #4 laurenbach, Dec 12, 2022
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see. Here's the CSS:
    Code:
    #main-header .mobile_nav {
    background: #333!important;
}
    And this is the CSS to change the Select text color:
    Code:
    .mobile_nav .select_page {
    color: #fff!important;
}
     
    #5 Divi.Help Pro Support, Dec 12, 2022
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
(You must log in or sign up to post here.)