0

My website is http://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;
}
2
  • This question requires knowledge of the Storefront theme, so you have a better chance of getting an answer at their support line. – cjbj Oct 12 '16 at 8:15
  • I posted the question on wordpress forum as well but no response yet – Ankit Oct 12 '16 at 9:48
0

To change css in mobile view you need @media in you css. To apply on mobile view use @media as shown below

@media screen and (max-width: 768px) {

    Put your classes and IDs here

}

The above code will make your css apply only on those device whose Width is maximum of 768px in size.

You can use it with min-width also like this

@media screen and (min-width: 768px) {

    Put your classes and IDs here

}

The above code will make your css apply only on those device whose Width is minimum of 768px, In other words width must be bigger than 768px.

In your case you wanna change logo's background then put your logo's class/ID in @media and select your desired properties of those class/ID. If it don't pick up your properties then try to use!important with property like this background: #fff!important;

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.