Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 5, 2014 at 11:07 am #363492
    speedraleigh

    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 #363568
    Flikk

    Inside 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 #364127
    Andy

    Hey!

    thank for the help @Flikk.


    @speedraleigh
    If you have any other questions please let us know. We are happy to assist you.

    Regards,
    Andy

    December 9, 2014 at 6:10 am #365175
    speedraleigh

    Hi,
    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 #365796
    Ismael

    Hey!

    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,
    Ismael

    December 20, 2014 at 4:52 pm #370982
    speedraleigh

    repeat post, net played up when posting. so have deleted.

    • This reply was modified 9 years, 11 months ago by speedraleigh.
    December 20, 2014 at 4:53 pm #370983
    speedraleigh

    Ok, 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 #371221
    Josue

    Hey!

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.