Change mobile menu background color in storefront theme

  • Hi,

    My website is https://fitnesslover.byethost18.com/

    I’m using storefront theme. It shows perfectly in desktop. But when in mobile mode the background color behind the logo disappears. It takes the background color of the menu (white). I want the background color behind the logo as it is in the desktop and background color for menu as white. Just like it shows in desktop.

    How do I do it?

    I have added few css code in my child theme

    /* Super menu underline color */

    .main-navigation ul li:hover > a {
    border-bottom: 4px solid #96588a;
    }

    /* Sub menu background color */

    .menu li li {
    background: #c7c7c7;
    background-image: none;
    border: 1px solid #e5e5e5;
    color: #444;
    filter: none;
    margin: -1px 0 1px 0;
    width: auto;
    }

    /* Reducing header height */

    header#masthead {
    padding-top: 20px;
    }

    /* Centering of logo and secondary navigation menu */

    nav#site-navigation {
    padding-top: 0px;
    }

    /* Super menu background color */
    .storefront-primary-navigation{
    background: white;
    }

Viewing 3 replies - 1 through 3 (of 3 total)

  • I have the same problem. I have a code in my css that changes the default grey background to yellow on a desktop version.

    .storefront-primary-navigation{
    background:#ffe500;
    }

    When viewed on the mobile handheld view the yellow fills the navigation wrapper which is the area behind the logo and to the right. I am using storefront theme out of the box.

    The only way to get rid of this yellow background wrapper is to change the background colour of the navigation wrapper to white. And then change the colour of the navigation to yellow.

    .storefront-primary-navigation{
    background:#fff;
    }

    .main-navigation ul li a {
    background: #ffe500
    }

    although the background colour then doesn’t run across the screen it appears as blocks behind the navigation items.

    The other thing you can do is change the background colour of the site title logo to white but then you’re left with the block of colour to the right. I’m still investigating this issue. I would like to know if we can override the colour of the navigation wrapper when it resizes for handheld.

    I found the answer! Yeah hey! add this to your child theme, and just swap the colours I have for the colours that you want.

    .main-navigation ul li a:hover{
    color:#808080
    }
    @media screen and (min-width: 768px) {
    .storefront-primary-navigation {
    clear: both;
    margin-left: -9999px;
    margin-right: -9999px;
    padding-left: 9999px;
    padding-right: 9999px;
    background: #fff;
    }
    .storefront-primary-navigation:after {
    content: “”;
    display: table;
    clear: both;
    }
    .storefront-primary-navigation{
    background:#ffe500;
    font-family: ‘Open Sans Condensed’, sans-serif;
    }

    Thread Starter agarwalankit

    (@agarwalankit)

    @jolewiswebmaster Thank you so much ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change mobile menu background color in storefront theme’ is closed to new replies.