[Resolved] GP Child theme – slider in website header

[mapsarska]

It’s me again, i know i know you are starting to hate me 😉

To the point, i installed GP Childtheme, activated all working like on Parent GP.
I have two problems:
1. I wanted to edit header.php to place slider code there, in editor, but Child theme only says its inheriting all from Parent theme, but how can i place code in Parent there, the whole idea of child theme is to add code in it and not in parent, i am so lost in all of these. I ended my programing education on html 🙁

2. In what exact place should i add the slider code

<?php echo do_shortcode("[metaslider id=1371]");?>
		

to be shown it the exact place as standard background in header.
And if possible how to make social icons i have in header to float above this slider like it was above the background picture before?

[mapsarska]

I also tried placing slidebar in GP-Hooks but cannot hind the correct place in the header for it…

And placing in text field in header widget also not work like i would like to….

[Jean Paiva]

You can use the ‘After Header Content’ hook

[mapsarska]

This is want i want to achive, its a place in header background:

This how the exact slider look like when in GP-hook in After header

I tried all places in gp-hooks and none look like jpg as background…

[Tom]

Can you link me to your site? You’ll need some custom CSS here.

[mapsarska]

link to the site is http://www.adlerpneumatyka.pl

[Tom]

Give this a shot:

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

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

[mapsarska]

Tom it is working but now its covered all header even the menu 🙁

[mapsarska]

this is how i edited it a little bit

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.home .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;
}

Its look ok on desktop, however it totally suck on mobile 🙁

[mapsarska]

I also discovered that now the social icons in header widget stopped working 🙁

[mapsarska]

sorry i write reply under reply but i cannot edit my post now, dunno why…

I noticed another thing, the code you gave me, i paste and edited in Apearance/CSS edit, option one above the last. It is working like it should only on the first page, with news, all other pages have look like before, and also the header widget is not working

[bdbrown]

Hi mapsarska. I just checked the site you linked above. The header looks the same on all the pages I viewed and the social icons are functional. I don’t see the metaslider.

[mapsarska]

Yes casue i changed it to be functional for my users, disable the customs css, turn of slider in hook, and set header as background casue not working as a file added.

[Tom]

Hmm, it shouldn’t have covered your menu, and that z-index stuff should have made the title and header widget display above the slider.

The .home part is what made it only work on the homepage – you can remove that to make it work on all pages.

I’ll need to see it back up live to see why it was covering the menu etc..

[mapsarska]

Ok Tom, i got it running again.
Without .home slider is showing on all pages. Ok.

I put the code in custom css editor, hope its right place, but only doing that didn’t display the slider, i also had to place the slider code in the hooks, but there are so many fields i dont know which to choose…

It placed in wp_head it is shown full screen above header so to high since i want it to place in the same place as it would be in header background.

No matter where i plae it, header wigdet social icons are not clickable, only the site name an title is working.

Please check yourself…

[Author]

Posts