Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 16, 2020 at 12:39 pm #1222989
    lyndondarkes

    Hi, I have an issue with http://www.fisherperformance.co.uk/ when viewed on an iPad. The Homepage has a transparent header and works well on large screens with an alternative logo, white burger menu and white social icons. On all other pages, I have an off white background with the original logo, black burger menu and black social icons. When viewing the home page on an iPad I don’t have a transparent header, I see the off white background, main logo, black burger menu and problematic white social buttons which don’t stand out.

    The home page on an iPad seems to be in between a transparent header and a non-transparent header. If I change the CSS to show the transparent header on iPad then it doest let me see the alternate header so that’s no good.

    The fix for me would be to have black social buttons on the home page on iPad as I have on all other pages or to have a transparent header on the iPad with the alternate header showing.

    Its probably easier for you to look at my site than me to explain.

    Please can you help?

    June 19, 2020 at 5:34 pm #1224100
    Victoria

    Hey Lyndon,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    June 19, 2020 at 6:50 pm #1224122
    lyndondarkes

    Hi,

    Ok, its number 4 that is the problem but i have included other instances to show the error.

    1. On full screen the home page shows with a tranperant siticky header as desired, with a alternative logo and white icons. This is correct.
    http://www.lyndondarkesdesign.co.uk/fpc-screenshots/ss1-homefull.jpg

    2. On full screens, on the home page, when the user scrolls down the page the sticky header shows the main logo and black burger menu and social icons – This is correct
    http://www.lyndondarkesdesign.co.uk/fpc-screenshots/ss2-homefull-scrolled.jpg

    3. On full screens, on all other pages the standard header is displayed with the main logo and black burger menu and social icons – This is correct
    http://www.lyndondarkesdesign.co.uk/fpc-screenshots/ss3-standardpage-full.jpg

    4. On iPad, on the home page, the header shows the main logo, black burger menu BUT WHITE social icons – This is incorrect, i want them black.
    http://www.lyndondarkesdesign.co.uk/fpc-screenshots/ss4-ipadhomescreen.jpg

    5. On iPad, on all other standard pages the header is displayed with the main logo and black burger menu and social icons – This is correct
    http://www.lyndondarkesdesign.co.uk/fpc-screenshots/ss5-ipadstandardscreen.jpg

    June 24, 2020 at 12:50 pm #1225163
    Victoria

    Hi lyndondarkes,

    Thank you for such a detailed explanation :)

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 989px) {
   #top .av_header_glassy.av_header_transparency .social_bookmarks li a {
      color: #000;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 24, 2020 at 2:12 pm #1225208
    lyndondarkes

    Hi Victoria

    Thank you for such a simple solution to such a long-winded question, it works perfectly. :)

    Regards

    Lyndon

    June 24, 2020 at 8:13 pm #1225332
    Victoria

    Hi Lyndon,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Transparent header with strange behaviour on iPad’ is closed to new replies.