-
AuthorPosts
-
December 5, 2014 at 11:07 am #363492
I have a background set in the the header/logo top area. Problem I have, it clashes with the mobile menu icons from a visual point of view.
How can I have the background dissappear once the mobile menu activates?Thanks In advance.
December 5, 2014 at 3:16 pm #363568Inside your custom.css there is an area that reads:
@media only screen and (max-width: 767px) { }
You can add custom CSS inside those brackets to apply for the mobile view.
Or you can cope the code into the custom css field inside the enfold options and then add your CSS code to hide the background.
Then you should be able to remove the background with the following CSS:@media only screen and (max-width: 767px) { #header_main { background: none; } }
For the background you also can define a color in hex instead of the “none” if you prefer that. http://www.w3schools.com/tags/ref_colorpicker.asp
December 6, 2014 at 7:19 pm #364127Hey!
thank for the help @Flikk.
@speedraleigh
If you have any other questions please let us know. We are happy to assist you.Regards,
AndyDecember 9, 2014 at 6:10 am #365175Hi,
Thanks, but no luck with it.I’m not sure if you are referring to the Quick CSS box in the themes options? I’ve had no luck inserting the codes in there.
I tried putting the code also in the Custrom CSS file in between the forward slashes ‘/’ Didnt work either.
Any help will be great!
December 10, 2014 at 3:09 am #365796Hey!
Please post the website url here. We would like to check it. You can try this:
@media only screen and (min-width: 768px) { .header_color .header_bg { background: none; } }
Regards,
IsmaelDecember 20, 2014 at 4:52 pm #370982repeat post, net played up when posting. so have deleted.
- This reply was modified 10 years ago by speedraleigh.
December 20, 2014 at 4:53 pm #370983Ok, managed to get it working with a combination of both your codes. What I’ve used below. So it’s really a case of using Ismael’s code provided, but I’ve changed the width from min to max and instead of background none, which was casuing it to go transparent, I’ve set it to the color hex code as informed by Flikk. So the below worked.
Will I need to do the same code if I was going to do it for the socket also? So in other words, same code but change .header_color .header_bg to this instead: socket_color .socket_bg ???
@media only screen and (max-width: 768px) {
.header_color .header_bg {
background: #FFFFFF;
}
}Big Thanks!
December 21, 2014 at 7:40 am #371221Hey!
No, the socket does not have such classes, you’d need to use #socket:
@media only screen and (max-width: 768px) { #socket { background: #FFFFFF; } }
Cheers!
Josue -
AuthorPosts
- You must be logged in to reply to this topic.