[Resolved] fixed header-slider in background

[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

[Tom]

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 🙂

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

[Tom]

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.

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

[Tom]

Looks good now!

You as well 🙂

[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

[Tom]

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

[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

[Tom]

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

Thanks for the screencast! Super helpful 🙂

[Tom]

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 🙂

[Frederik]

Problem solved. Your script-modification did the job !

Many thanks for your valuable support !!

[Tom]

Perfect, glad it fixed it! 🙂

[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

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

[Author]

Posts