Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 13, 2018 at 1:07 pm #926058
    j_vandonink

    Hi,
    There are two things I would like to fix but don’t know how to do.
    Both problems occur when shrinking the size of the browser window or going to different devices: computer – tablet – smartphone.

    1. 1. Header color goes from transparant to black to white. The black color should not be there
    2. 2. The first part of the site is a color section, set to 100% height, with a scroll down arrow.
      On computer size everything is ok, but on the smaller devices, the bottom part of this color section and the arrow is not visible unless you scroll down.

    This image illustrates the problem:
    behaviour on different devices

    Anyone an idea how I can fix these 2 problems?

    Thanks a lot!
    Jurgen

    March 14, 2018 at 10:16 am #926521
    j_vandonink

    Hi, I switched off the fact that the menu goes to a burger menu on tablets. This fixed the black header background.

    Then remains the issue of the 100% height color section on smaller devices, it extends below the initial screen because of the fact that the transparency of the header disappears. How can I fix this?

    March 15, 2018 at 9:37 am #927152
    Vinay

    Hi,

    Glad the header background issue is sorted for you.

    For the scrolling icon to be visible you can set a transparent header in mobile too by adding the below CSS to Enfold > General Styling > Quick CSS

    /* Transparent header on mobile */
 @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

    If you want to have the current header please use the below code. This code will move the content up and under the header.

    @media only screen and (max-width: 767px) {
.responsive #top #main {
    margin-top: -81px;
}}

    Best regards,
    Vinay

    March 15, 2018 at 4:38 pm #927466
    j_vandonink

    Hi Vinay,
    Thanks for the answer.
    I prefer the last option and it works great for the home page,
    but it does it thing also on all the other pages.
    Is there a way to only have it on the homepage?
    Thanks,
    Jurgen

    March 15, 2018 at 7:04 pm #927585
    Vinay

    Hi,

    To make changes only on the homepage please replace the previous code with this one

    @media only screen and (max-width: 767px) {
.responsive #top.home #main {
    margin-top: -81px;
}}

    Best regards,
    Vinay

    March 15, 2018 at 8:46 pm #927670
    j_vandonink

    Thanks a lot!
    You guys are really fast and thorough in your support!
    Regards,
    Jurgen

    March 15, 2018 at 11:35 pm #927794
    Vinay

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Strange color in header and behaviour of color section on tablet’ is closed to new replies.