[Resolved] fixed header-slider in background

Home Forums Support fixed header-slider in background

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #128632
    Frederik

    Hello,
    1st of all, thank you very much for this wonderful theme.This is just brilliant, without exceptions !!

    But there is one tiny thing that i canยดt get sorted out.

    See this page: http://dogsbestfriends.de

    The image-slider shows up on main-page only which works just fine. I am using GP Hook “After Header” with following code to insert the slider:

    <?php if (is_front_page() and is_home() ) : ?>
          <?php echo do_shortcode("[metaslider id=123456]"); ?>
    <?php endif; ?> 

    Is is possible to fix the image-slider (meta-slider) in the background so that all content gets hovered on top over the image-slider ?
    I am sure this will be possible somehow using z-index or something similar !?

    Thanks very much in advance for your valuable input

    Frederik

    #128666
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Seems your logo isn’t working? May be worth checking out.

    So you’re wanting the full screen slider to run in the background behind all of your content? Even with the content having a white background?

    Let me know ๐Ÿ™‚

    #128675
    Frederik

    Hello Tom,thx for quick reply.
    Not sure what you mean with non-working logo?
    However, your assumption is correct.
    Slider should remain in same Position as now.
    It should be fully visible. Only when user Starts to scroll, the slider must not mkve-up, but remain at it’s position and be layered by content moving up (having any bg-colour)

    #128688
    Tom
    Lead Developer
    Lead Developer

    The logo on your site is broken for me – it isn’t loading. You may want to re-upload it through the Customizer ๐Ÿ™‚

    As for the slider – this is pretty difficult. You may want to check with the Metaslider developers to see if they have any ideas.

    The best I can suggest is this CSS:

    .metaslider.metaslider-nivo.metaslider-305.ml-slider {
        position: fixed;
        z-index: -1;
    }

    However, that brings the content up and puts the slider in the background.

    To do what you’re wanting, you’ll need some custom javascript I believe.

    However, if you ask the Metaslider devs they may know of a better way.

    #128870
    Frederik

    Hello Tom,

    thanks for your feedback. Will check with metaslider devs.
    Indeed Logo was showing on several devices and from different ip-adresses. But in customizer it was not defined. Strange !
    However, re-uploaded and hopefully it now remains where it belongs to ๐Ÿ™‚

    have a nice day…..

    #128943
    Tom
    Lead Developer
    Lead Developer

    Looks good now!

    You as well ๐Ÿ™‚

    #140298
    Frederik

    Hello Tom,

    However, after successful implementation, i started to play-around with W3TC. And…….Tadaaaaa: Problem occurs again.
    OK, i know this is definitely not something that must be solved by GP-development. But it might be worth having a look at it ?

    Even though all GP-Template related scripts and CSS were excluded from minifying, i canยดt get it done.

    So, website is now extremely fast (considering all the scripts and DNS-lookups), but menu-fade is not optimal. I am wondering what will happen when i start using nginx in front of Apache ??

    Please note, this is not top-priority. I know it will work when de-activating W3TC, but it might give you some additional input for future development.

    best
    Frederik

    #140358
    Tom
    Lead Developer
    Lead Developer

    Can you show me what’s happening when it’s activated? Is it just a Menu Plus issue?

    #140414
    Frederik

    Hello Tom,

    this is soo strange…..i was doing some more tests.
    menu-plus does definitely not work during initial load of page (it is shown twice during scroll)
    only after a second klick on the “home” -menu, all seems to work fine.
    This is also definitely not related to W3TC (sorry for my initial assumption).

    so, there must be sometinhg that is triggered again when “using” the menu after page-load…

    i have just made a short screencast. fore more-detailed view on it.
    scrfeencast

    #140529
    Tom
    Lead Developer
    Lead Developer

    Very interesting – let me run some tests and I’ll get back to you.

    Thanks for the screencast! Super helpful ๐Ÿ™‚

    #140749
    Tom
    Lead Developer
    Lead Developer

    This is a tough one because I can’t reproduce it.

    I made a change which may help – if you want to email me at support@generatepress.com I can send you the latest version to test out.

    Let me know ๐Ÿ™‚

    #140874
    Frederik

    Problem solved. Your script-modification did the job !

    Many thanks for your valuable support !!

    #140976
    Tom
    Lead Developer
    Lead Developer

    Perfect, glad it fixed it! ๐Ÿ™‚

    #173555
    Sven

    Hello Tom and Frederik,

    as I see on Frederiks start page the original task (fixed header-slider in background) actually isn’t solved yet, is it?

    I’d like to insert a slider into my start page, too, that stays fixed in the background…

    Appreciate your answer/s!

    Regards from Germany,
    Sven

    #173570
    Frederik

    Hello Sven,

    with css you could manage to have the slider fixed in the background. Just add this to the div which is hosting the slider.

    style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;"

    in my example i would add following code to the GP-hook:

    <?php if (is_front_page() and is_home() ) : ?>
    <div id="metaslider-background" style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;">
    <?php echo do_shortcode("[metaslider id=123 percentwidth=100]"); ?>
    </div>
    <?php endif; ?>

    main-disadvantage (in my case) would be that the slider will “always” stay behind content. My intention was to have slider fully visible until content starts to scroll.

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