Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 20, 2015 at 11:44 am #415214
    stephenturner

    Hi Guys, tricky one for you… i’m using a transparent header and wanted to use a different logo for the transparent header to when you scroll up to the one that appears on the sticky header, i have achieved this by adding the following code from your support forum:

    .header-scrolled .logo img { opacity: 0; }
    .header-scrolled .logo a { background-image: url(http://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-repeat: no-repeat; background-size: contain; }

    Then i wanted to hide the logo on the transparent header so the logo only appears on the sticky header, i achieved this again by code from the support forum:

    .logo { opacity: 0; }
    .header-scrolled .logo { opacity: 1; }

    So far so goo, so now, on the transparent header on the homepage you can see no logo (although it’s there as you can click on the space it appears in), and when you scroll up, the sticky header kicks in and the second logo is visible, all great… BUT…

    On my ipad and iphone, it hides the logo in the sticky header and mobile header, i’m assuming its pulling in the code to hide the logo, any suggestions, hope it’s clear?

    March 20, 2015 at 4:06 pm #415328
    Yigit

    Hey!

    Can you please post the link to your website? :)

    Cheers!
    Yigit

    March 20, 2015 at 6:19 pm #415448
    stephenturner

    http://stinet.co.uk/intrepidrisk/

    March 20, 2015 at 9:44 pm #415544
    stephenturner

    Hi, an update: when you hise the logo on the homepage with the transparent header, i have just noticed that the logo is also hidden on the about us page, until you scroll down and the sticky header kicks in, it looks like when you hide the logo on the transparent header, it also hides it on all the other pages too, until you scroll down and the sticky header logo kicks in, so the question i maybe should of asked originally is:

    Using custom css i have created 2 logos one main logo and one for the sticky header, but i only want to hide the main logo on the homepage, but not on any of the others, can this be done and if possible how, thanks guys (ps loving the theme, on my second license and going to use enfold now for all other future projects)… GREAT THEME!

    March 22, 2015 at 9:08 am #415911
    Ismael

    Hey!

    Replace this code:

    .logo {
  opacity: 0;
}

    with this:

    .home .logo {
  opacity: 0;
}

    Cheers!
    Ismael

    March 22, 2015 at 12:29 pm #415944
    stephenturner

    works like a charm! thank you… :-)

    March 23, 2015 at 9:06 am #416261
    Rikard

    Hi!

    Glad we could help :)

    Best regards,
    Rikard

    March 25, 2015 at 5:34 pm #417958
    stephenturner

    Please mark this topic as resolved, thank you… :-)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Using Different Logos On Transparent Header and Sticky Header’ is closed to new replies.