Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Support request] Change Logo & Parallax

Home Forums Support [Support request] Change Logo & Parallax

Home Forums Support Change Logo & Parallax

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #216404
    Amandine

    Hi Tom!

    I have a few questions:

    1. Is it possible to change the normal logo to the sticky logo at a certain width? I would like my logo to change to the sticky logo at a width of 890px, is this at all possible?

    2. Is it possible to have the background image fixed when using the parallax function (and still be able to have the image on fullscreen)? I’ve tried adding this code to my simple CSS and PHP, but it didn’t work unfortunately: https://generatepress.com/forums/topic/parallax-in-sections/

    3. There’s something weird going on with the sticky navigation when on mobile – and not just on the website that I’m currently working on, but also on generatepress.com. When I’m scrolling down the sticky navigation works fine, but then when I’m scrolling up for the first time after having scrolled down, the sticky navigation disappears until I stop scrolling up and then it reappears. Same thing happens when I’m scrolling up and then down for the first time. (It is most obvious when one scrolls up, and then down, and then up again, and down again, and so on). This looks a bit wonky and I was wondering if there was a possibility to have it stick at all times on mobile? I’m using an iphone and it happens on safari, chrome, and firefox.

    Thank you Tom!

    #216511
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. The sticky logo only exists inside the sticky menu, so this wouldn’t be possible. However, you could switch out logos if you added them both inside GP Hooks:

    <div class="my-logo">
        <img src="URL TO YOUR LOGO" alt="" />
    </div>
    <div class="my-sticky-logo">
        <img src="URL TO YOUR STICKY LOGO" alt="" />
    </div>

    Then you could do this:

    .my-sticky-logo {
        display: none;
    }
    
    @media (max-width: 890px) {
        .my-sticky-logo {
            display: block;
        }
        .my-logo {
            display: none;
        }
    }

    2. I’m not sure what you mean? Using parallax forces the background image to be fixed by default.

    3. Interesting, I’ve never experienced this/received reports from others on this. What version of GP Premium are you using?

    #218211
    Amandine

    Thank you for your quick reply, Tom!

    Number 1 worked great.

    2. I’d like the more basic parallax effect, i.e. the one where the content simply rolls over the image without the image slightly moving as well.

    3. I’ve tried this on other phones as well and interestingly, this does not happen on all phones. The iphone 4s displays it correctly (i.e. the sticky navigation sticks to the top at all times), while other phones such as the iphone 5s and iphone 6 have this problem. I am using GP Premium Version 1.2.89. I have also tried different sites that are listed on the “Want your site showcased”-page and for example, the same issue happens on the page http://www.travelandstayinsa.co.za while the navigation works fine on http://www.cailincarrier.com.

    #218259
    Tom
    Lead Developer
    Lead Developer

    2. Ah I see – disable the parallax option in the settings, then add this CSS:

    .generate-content-header {
        background-attachment: fixed;
    }

    3. Interesting, I know that iPhones handle scroll functions differently. For example, if you scroll up slowly while not taking your finger off the screen vs swiping once and removing your finger. Can you see a difference in those two methods?

    #218359
    Amandine

    Number 2 worked great, thank you so much Tom!

    3. Yes, that’s it! If I scroll up without taking my finger off the screen this doesn’t happen. So I guess it’s an iPhone problem?

    I have yet another issue concerning my first question (changing the normal logo to a smaller logo at a certain width). I have added the code into GP hooks and have added the following code into CSS:

    
    .small-logo {
        display: none;
    }
    
    @media (max-width: 880px) {
        .small-logo {
            display: block;
        }
        .site-logo {
            display: none;
        }
    }

    It works great, the site logo changes to the small logo at 880px. However, the problem is that the navigation items suddenly start floating under the logo at the breakpoint of 880px (I have also tried different max-widths, and the navigation items always start floating below the logo at the specified width). Here’s an image of the issue:
    http://img5.fotos-hochladen.net/uploads/bildschirmfotocemy0puahx.gif
    Do you know what might be causing the problem?

    Thank you for your time and your help Tom!

    #218361
    Amandine

    Sorry, just figured out the problem! The solution was putting

    @media (max-width: 880px) {
        .small-logo {
            display: inline;
        }

    instead of display: block. Sorry about that Tom!

    #218414
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution!

    Yea, iOS decided to do things a little differently than everyone else when it comes to touch events.

    Out of curiosity, is it the same if you set the “Sticky effect” to “None”?

    #218953
    Amandine

    Yes, same thing happens if the sticky effect is set to “None”.

    #218959
    Tom
    Lead Developer
    Lead Developer

    As a test, can you try adding this CSS:

    .navigation-clone,
    .main-navigation.is_stuck {
        position: -webkit-sticky !important;
        position: sticky !important;
    }

    Nothing should change on desktop, but it should make for a better experience on mobile iOS.

    Let me know πŸ™‚

    #220060
    Amandine

    Thanks for the reply Tom! The code unfortunately made things worse. Every time I scroll down and lift the finger off the phone, the navigation bar disappears and reappears as soon as I stop scrolling. But since it’s not a big problem, I’ll leave it the way it was before. Thank you anyways Tom!

    #220079
    Tom
    Lead Developer
    Lead Developer

    I’ll keep researching a solution to improve it on iOS πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.