Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 30, 2022 at 2:46 pm #1356950
    ivanglaser

    Hi
    I have transparent headers enabled on all but 2 pf my website’s pages

    All works fine when viewed on a PC but the transparent eaders dont work at all on a mobile device

    I found this code on the support site and tried it :

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
    background: transparent;
    position: absolute!important;
    }}

    It seemed to have partly worked because the images on my home page moved up the screen a bit but the opaque header remained

    FYI, I use a background image for my header

    Can you help at all ?

    July 2, 2022 at 12:48 am #1357026
    ivanglaser

    Hello. Can anyone help with this ?
    Tx

    July 2, 2022 at 12:06 pm #1357048
    Nikko

    Hi ivanglaser,

    We apologize for the delayed response.
    I have checked your site on mobile and I don’t see any issue.
    Can you try to clear your browser cache, or if you are using chrome on mobile, try to use it incognito mode.

    Best regards,
    Nikko

    July 2, 2022 at 2:12 pm #1357074
    ivanglaser

    Hey Nikko. Glad you can’t see anything wrong because it means my temporary workaround is working :-)

    … but my problem is not resolved

    When I use this code :

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
    background-color: transparent;
    position: absolute!important;
    }}

    … then transparent header works on mobile device as long as I don’t use a custom background image.

    I need a custome background image because on a couple of pages on my website I dont have transparent header enabled

    So, is there additional code that I need to insert that makes the background image transparent when page header transparency is enabled ?

    It all works fine on a PC

    Thanks

    July 2, 2022 at 3:08 pm #1357081
    Nikko

    Hi ivanglaser,

    I see, you can target the pages with that uses transparent headers using this class in the html: html_header_transparency.
    Can you comment out the custom CSS codes that you have added? (or temporarily remove them and save them somewhere else) then give us the link to a page that does not use a transparent header and we’ll try to give you some CSS codes that should help.

    Btw, your site really looks great, especially those animal photos (one of the best I’ve seen) :)

    Best regards,
    Nikko

    July 3, 2022 at 1:18 am #1357106
    ivanglaser

    Hi Nikko
    Thank you so much for the compliment ! I have wanted to build a website of my images for many years but have never had the time. I knew nothing about building websites 3 weeks ago so it was very hard at first but thanks to Enfold product, the support forum and direct help from Kriesi staff like you, I have learnt a lot. Take a look at my site using a PC/Laptop. It’s better to view wildlife images on a bigger screen :-)

    Remember that this issue I have with transparency not working when I have a background image in header is only on a mobile device but I have found a work-around as you can see. Everything works fine on a PC.

    If I understand what you are saying, I can target transparent headers for mobile devices on specific pages

    If that is the case, I only need transparent header for mobile device to work on the HOME page.

    If I can get code for that to try on the home page, then I can test it myself

    If it can’t be done, it’s no problem. My work-around works as you saw

    July 3, 2022 at 5:37 am #1357107
    ivanglaser

    Hi.
    I found this code and added it

    .home .header_bg { background: none !important; }

    This has completely resolved the issue I was facing :-)

    I realise now that what I was trying to do was to hide the background image from certain pages…not make it transparent

    So sorry about that !

    Ivan

    July 3, 2022 at 9:11 am #1357111
    ivanglaser

    Hi

    One thing. If you go to my website on a mobile device and scroll upwards, you will see that there is a bit of a jump or “stutter” … ie the scrolling is not smooth

    Is there any reason for that…and any way to fix that ?

    Tx

    July 3, 2022 at 12:51 pm #1357122
    Mike

    Hi,
    For the scrolling stutter on mobile, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width:767px) {
 #top #wrap_all .av_mobile_menu_phone {
  position:absolute!important
 }
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 3, 2022 at 2:24 pm #1357130
    ivanglaser

    Hi Mike
    You’re a genius !
    Thanks so much to everyone for the help
    Regards
    Ivan

    July 3, 2022 at 3:39 pm #1357135
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Transparent Header not working on Mobile device’ is closed to new replies.