Skip to content
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
  • Log In
  • Free Support

[Support request] Parallax for Logo and Site Header?

Home › Forums › Support › Parallax for Logo and Site Header?

  • This topic has 11 replies, 4 voices, and was last updated 4 years ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 5, 2017 at 10:48 am #260992
    Joe

    Hello,

    I’m trying to figure out how to get a parallax effect on the site header and main site logo.

    Is there a function for setting a parallax scroll (so the site header and logo scroll at different rates) or do I have to do that with a Page Header, or using Sections, or what…?

    If there is something in the basic documentation or the forums about how to approach this, I would appreciate a pointer, as I haven’t been able to find it.

    Thanks,

    Joe

    January 5, 2017 at 8:35 pm #261118
    Tom
    Lead Developer
    Lead Developer

    Hi Joe,

    Not easy to do I’m afraid.

    What do you mean by adding it to your logo? Any examples?

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/
    Ongoing Development: https://generatepress.com/ongoing-development

    January 6, 2017 at 12:30 am #261161
    Joe

    Hello,

    An example of the kind of thing I want to achieve is here: http://flevans.co.uk/ β€” the content on the header (in this case the text “New LP..”) scrolls at different rate from header background.

    I’d like to do that but with the logo scrolling at a different rate to the header background using GeneratePress. Is that possible?

    (Dev site that I’m working on is here: http://incandenza.net/gilouscafeDEV/ β€” I want logo text to scroll at different rate to header background).

    Thanks!

    January 6, 2017 at 1:15 am #261178
    Joe

    I can get something approaching what I want it to do using Sections instead of the site header (http://incandenza.net/gilouscafeDEV/sections-test/) but this causes the image to repeat on scrolling on some screen sizes (as described in this forum post https://generatepress.com/forums/topic/broken-parallax-effect/, and many screen sizes do not scale down the background image properly whether I use Sections or Site Header.

    Will these issues be fixed in the next version, and can you tell us when it will it be released?

    Thanks!

    January 6, 2017 at 8:40 am #261287
    Tom
    Lead Developer
    Lead Developer

    You can actually fix that issue by adding this CSS:

    .generate-sections-container.enable-parallax {
        background-attachment: fixed;
    }

    Let me know if you need more info πŸ™‚

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/
    Ongoing Development: https://generatepress.com/ongoing-development

    January 6, 2017 at 10:37 am #261343
    Joe

    Hi, thanks Tom, helps with the parallax and the image repeat issue.

    Appears to still be some issues with smaller screens not resizing the background, but I’ll have a play with the responsive CSS next week and see what I can do.

    Have a good weekend!

    January 6, 2017 at 10:16 pm #261470
    Tom
    Lead Developer
    Lead Developer

    That’s the downfall of using background-attachment: fixed – it’s not great on mobile, which is why it’s not there by default.

    You might need to set a different background image specific to mobile using media queries.

    Let me know if you need more help πŸ™‚

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/
    Ongoing Development: https://generatepress.com/ongoing-development

    April 10, 2017 at 2:37 pm #304210
    John

    I think I’m trying to do the same thing as Joe. How do you create a parallax right below the header, like the one shown in the page header video? I basically want to do something like that example, but have the parallax appear on everything — my home page, single blog posts and pages — not just one page.

    Thanks for the great theme … JT

    April 10, 2017 at 2:44 pm #304212
    Leo
    Staff
    Customer Support

    Hi John,

    You can create the page header using Blog Page Header:
    https://docs.generatepress.com/article/blog-page-header/

    Then use the filter to display it everywhere else:
    https://docs.generatepress.com/article/blog-page-header/#displaying-the-blog-page-header-elsewhere

    Let me know if helps.

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    April 10, 2017 at 5:19 pm #304236
    John

    This is helpful, thanks. Got it working on the blog index, which was my main goal. The filter doesn’t work for me but I can live with that.

    April 10, 2017 at 5:37 pm #304239
    John

    Actually, never mind, I got it to work! Thanks again.

    April 10, 2017 at 7:50 pm #304291
    Leo
    Staff
    Customer Support

    Glad I could help!

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.
Log In

Common Issues

  • Missing style.css
  • Updating errors
  • Plugin Install Failed

Useful Articles

  • Installing GP Premium
  • Installing GeneratePress
  • How to add CSS
  • How to add PHP

GeneratePress

  • About
  • Premium
  • Site Library
  • Gutenberg
  • Affiliates
  • Reviews
  • Brand Assets
  • Blog
  • We’re Hiring!

Support

  • Documentation
  • Contact Us
  • Support Forums
  • Fastest WordPress Theme
  • Changelogs
  • Legal
  • Donate
  • Translate

Popular FAQs

  • Install GeneratePress
  • Installing GP Premium
  • Missing style.css
  • Plugin Install Failed
  • Adding CSS
  • Adding PHP
  • WordPress Hosting

Social

  • Facebook
  • Twitter
  • WordPress
  • GitHub
Made with on Vancouver Island
  • Home
  • Premium
  • Site Library
  • Install
  • Contact
  • Support Forum
  • Documentation
  • Account
  • Checkout