Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1013518

    Hi,

    Re. one of my clients websites (see link and login details below).

    Suddenly (after an update?) it seems that the transparant header for tablet size screens is no longer working. That is for screen size from 768 up to 989 px, the header turns into a dark grey (#555555?).

    I tried everything, but can’t find the cause for this…

    Can you please have a look why this is going wrong?

    Thanks in advance & regards,
    Monique

    #1013584

    Hey Monique,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 990px) {
    #header {
        background: white !important;
    }
    }

    Best regards,
    Rikard

    #1013683

    Hi Rikard,

    Thanks for your reply.

    I tried something like this before and it didn’t work. Now I got it to work with the following code (smaller screens were not affected and screen size 990 px has a transparent bg!):

    @media screen and (min-width: 768px) and (max-width: 989px) {
    #header {
        background: white !important;
    }
    }

    There are a few things I don’t understand and I hope you can clarify this for me:

    1) Why did it suddenly work no longer in the proper way? Is there a bug somewhere?

    2) I always use a child theme and put your code in the child style.css. That didn’t work. Then I put it in the theme options > general styling and it worked. Then I took it out of the theme options > general styling again but left it in the child styles.css and it still works. I don’t get why it didn’t work in the child styles.css in the first place but it worked after I inserted it in and deleted it from the theme options > general styling. Is this something that is perhaps being influenced by the settings in theme options > performance? Since that tab was added to the theme options, I regularly have issues with multiple sites with css in the child styles.css that seems not being taken into consideration. It is becoming quite annoying I must confess…

    Please advise.

    Regards,
    Monique

    #1013987

    Hi,

    1-2.) Did you enable the theme’s Performance > File Compression settings? Probably, the changes didn’t take effect immediately because the site was loading the old merged scripts and stylesheets. You have to disable the compression temporarily while you’re working or making changes on the site.

    Best regards,
    Ismael

    #1014083

    Hi Ismael,

    I believe file compression (for CSS and Javascript) is automatically checked after updating the theme to the version that offers these functions? If not, then yes, I must have enabled it ;-)

    Ok, I understand the working of it: before making any chances in theme settings and/or extra CSS, I should disable file compression, make the changes and than enable file compression again. I suppose in the last stage I can also check the box to delete old CSS and JS files and click the Save all changes button?

    That does not give an answer to my first question yet: I recently updated WP, theme and plugins and suddenly the header in tablet portrait turned grey… I ‘hate’ it when I don’t understand what is happening… Can you also explain this to me please?

    Regards,
    Monique

    #1014528

    Hi,

    Thanks for the update.

    Yes, you enable the settings back once you’re done with the site.
    Regarding the header, it becomes gray because of this css code.

    #header {
        position: relative;
        z-index: 501;
        width: 100%;
        background: transparent;
    }

    Did you add it?

    Best regards,
    Ismael

    #1014593

    Ok, thanks Ismael.

    I did not add the code you mentioned. It must come from the theme. In the page I set the header to transparent. In the theme options the header is set to sticky and shrinking.

    Perhaps a conflict somewhere?

    Best regards,
    Monique

    #1015018

    Hi,

    Can you please remove the code so we can see if all ok then?

    Best regards,
    Basilis

    #1015183

    Hi Basilis,

    Which code do you want me to remove?

    1) The code coming from the theme > I cannot remove that…

     #header {
    position: relative;
    z-index: 501;
    width: 100%;
    background: transparent;
    }

    2) Or the code I needed to correct the problem > if I do that the header turns grey again…

    @media screen and (min-width: 768px) and (max-width: 989px) {
    #header {
        background: white !important;
    }
    }

    I set CSS and Javascript file merging to disable and deleted old CSS and Javascript files.

    Regards,
    Monique

    #1015596

    Hi,

    It seems to be a bug in the layout.css file. The header_bg container is set to transparent when you’re on a page with transparent header but it doesn’t return the background color back on mobile view where transparent headers are disabled by default. You can keep the css modification for now. We’ll report it to the dev team.

    layout.css > line 203

    #top .av_header_transparency .header_bg {
        background-color: transparent;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    should be replaced with:

    @media only screen and (min-width: 989px) {
       #top .av_header_transparency .header_bg {
           background-color: transparent;
           opacity: 0;
           filter: alpha(opacity=0);
       }
    }

    should be:

    Best regards,
    Ismael

    #1018935

    Hi Ismael,

    Yes, that’s what I thought. Good it will be updated in the next version of Enfold.

    Can you flag this topic as solved please?

    Have a nice day,
    Monique

    #1022096

    Hi there,

    I can see that Victoria ‘visited’ this topic, but didn’t flag it as solved. To clean up my pending topics list: can you please flag this topic as solved? I cannot do it myself I believe?

    Thanks & regards,
    Monique

    #1022268

    Hi,

    I’ll close the thread now. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Transparent header on tablet not working’ is closed to new replies.