[Resolved] GP Child theme – slider in website header

[Tom]

Can you try pacing it in the before header content hook?

[mapsarska]

Yes of course it is now in before header and i ofcourse mark execute php

[Tom]

Try this:

body .metaslider {
	position: absolute;
	top: 0;
	left: 600px;
	width: 44%;
	max-width: 100% !important;
	z-index: 1;
}

.site-branding,
.header-widget {
	position: relative;
	z-index: 5;
        max-width: 50%;
}

[mapsarska]

Ok, now header wigdet is working, but we have a big gap between menu and slider can we avoid it?

[mapsarska]

Ok. i get rid of the gap by making slider little bigger

body .metaslider {
	position: absolute;
	top: 0;
	left: 550px;
	width: 51%;
	max-width: 100% !important;
	z-index: 1;
}

.site-branding,
.header-widget {
	position: relative;
	z-index: 5;
	max-width: 50%;
}

On desktop looking great and work fine, but it is not responsive 🙁
On mobile slider not visible when page loads, you have to swipe right and it is very small on top right corner, outside the screen.
And now with header widget set to 50%, social icons loads not in line but strange using very small part of screen, i will experiment a little with your CSS Tom, but i dont know anything about it, only can write in html…

[mapsarska]

Also i now checked few computers in my office friends and their desktop computers show page very different according to ressolution.

My computer 1920 x 1080

1280 x 1024

1024 x 768

HTC Desire 816 5,5″ screen
youtube video https://youtu.be/OpYe61asO1o

[mapsarska]

Only way to make it responsive is to have relative positioning?
Dont know much about css 🙁

[Tom]

Looks like you’ve tweaked some of that CSS to make it look like the above.

Making is responsive is definitely an issue – we’re doing something to the slider that it isn’t really developed to do.

You might want to contact those developers and see if they’ve helped anyone set the slider to the background of an element – they may have a better, responsive option.

[bdbrown]

What happens if you move the metaslider shortcode to the “Before Header Content” hook and remove the metaslider css? It should be responsive by default. Then we can work on positioning the site branding and widget where you want them to go.

[mapsarska]

@bdbrown Ok CSS deleted. Slider php hooked in “before header content” with execute php checkbox checked

[bdbrown]

Give this a try and see how it works:

/* resize metaslider */
.inside-header .metaslider {
    width: 75%;
    max-width: 925px
}

/* remove extra space around slider */
.inside-header {
    padding-top: 0;
    padding-bottom: 0;
}

/* move social widget up on top of slider */
.header-widget {
    margin-top: -100px;
}

/* move site title & tagline up next to slider */
.site-branding {
    margin: -110px 0 34px -10px;
    position: relative;
    z-index: 99;
}

/* move elements below slider for mobile view */
@media screen and (max-width: 768px) {
    .site-branding {
        margin-top: -80px;
        float: left;
    }
    .header-widget {
        margin-top: 20px;
    }
}

[mapsarska]

Thx, you check the look when have time.
Unfourtunaltelly it is not how should be.
– There is still some space below slider
– header widget lightway social icons not working
+ site title in header clickable
– mobile view tested on 2 mobiles i have Z1 5″ and HTC 816- 5,5″ very small slider,
Social icons are bigger 🙁

Im thinking of returning to static picture in header background…

[Tom]

Did a little research on this – maybe this plugin will help?: https://wordpress.org/plugins/jellyfish-backdrop/

In the “Containing element” option you could put .site-header

[mapsarska]

Thanks Tom.
I installed the plugin.
But have no idea how to use it with slider.
I deleted the CSS and disable the hook for it.

But i can only add one file from media gallery, have no idea how to use it with the slider

[mapsarska]

Ok, i have red hos to do it -> http://strawberryjellyfish.com/wordpress-plugins/jellyfish-backdrop/

But in my situation if i want to use it in .site-header, how can i create a slideshow using this plugin? If only shows slideshow options on site elements which are marked in Setting page.
I must experiment a little.

Its working if i created new page-> http://www.adlerpneumatyka.pl/header-slideshow-test/

But this have to be added to every page i have now? Not working on any other page only on the one i tested it 🙁

[Author]

Posts