[Support request] Change Logo & Parallax

[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!

[Tom]

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?

[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.

[Tom]

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?

[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!

[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!

[Tom]

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”?

[Amandine]

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

[Tom]

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 🙂

[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!

[Tom]

I’ll keep researching a solution to improve it on iOS 🙂

[Author]

Posts