[Resolved] insert logo and social icons into metaslider in header

[casimiro]

Hi
I don’t understand why but when I update to 1.7.2 the logo and the two lightweight social icons themselves out of meta slider not in metaslider.
I put in GP HOOKS
Before Header Content

[metaslider id=”50″]

before update
and—>
.fixed-slider-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

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

.site-header {
overflow: hidden;
}

.metaslider .theme-default .nivoSlider,
.metaslider .theme-default .nivoSlider img {
height: 100%;
}

.sidebar .widget {
text-align: center;

}
.sidebar .widget {
image-orientation: auto;
}
—>in CSS aditional
but now i must write in elements–>
<?php echo do_shortcode(‘[metaslider id=”57″]’); ?>
in Hook–> Before_header_content –> Execute Shortcodes Yes and –>Execute php Yes too –> Display Rules –>Entire site and–> the same CSS aditional
—>post before
What’s it’s wrong now?

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

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

[casimiro]

No, because it’s a local site at moment.
The first code, Tom gave it to me in forum wordpress.
I have a slider in header and I want insert logo in the left and two social icons at right but in the same slider.

[casimiro]

Now the site look that this:

and before:

[Tom]

Hi there,

So it’s working in the old hooks, but not inside the new Elements module?

Is there any way you can build the section in a live test site so we can see? It’s super hard to debug stuff like this without seeing it.

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

[casimiro]

Well, it seems that I have achieved it changing things.
But the social icons and the logo I can’t centre them.
It’s possible that?

It don’t work with the padding header

[Tom]

How are you currently adding them? Can you share your complete code?

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

[casimiro]

Hi
For Header MetaSlider
Elements–> Settings–>Hook–>Before_Header_Content–>Execute Shortcodes–> Marked
Elements–> Display Rules–>Location–>Entire Site
Elements–> Internal Notes–>

[metaslider id=”57″]

In CSS Aditional:
.fixed-slider-background {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;
}

.site-branding,

.site-logo,

.header-widget {

z-index: 2;

position: relative;

}

.site-header {

overflow: hidden;

}

.metaslider .theme-default
.nivoSlider,

.metaslider .theme-default
.nivoSlider img {

height: 100%;

}

.sidebar .widget {

text-align: center;

}

.sidebar .widget {

image-orientation: auto;

}

The logo in header are to left with header padding
10 – 40 – 150 – 25

And in Header widget
Lightweight Social Icons
[widget id=”lsi_widget-2″]
–>It gives the same thing where it puts it the alignment in the center to the left side or to the right always it’s just like it.

[Tom]

And there’s no way we can get a mockup like this on a live test site? I can guess with the CSS, but it will likely take a handful of iterations. If we can get a live mockup, it will only take one.

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

[casimiro]

Ufff
I’m working in local for now.
I don’t now how can send to see in live. At least for now.
Sorry for the incovenience
But I only want a metaslider in header and a logo centered at left and social icons centered too at right.
Thats all.

[Tom]

Maybe try this?:

.site-branding,
.site-logo,
.header-widget {
    margin-top: calc(50% - 100px);
}

You can change the 100px to make it more vertically centered.

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

[casimiro]

Not working or I don’t now how put the code, I was change the .header-widget like this:
.fixed-slider-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.site-branding,
.site-logo,.header-widget { margin-top: calc(50% – 100px);}

.site-header {
overflow: hidden;
}

.metaslider .theme-default .nivoSlider,
.metaslider .theme-default .nivoSlider img {
height: 100%;
}

.sidebar .widget {
text-align: center;

}
.sidebar .widget {
image-orientation: auto;
}

Once changed the code if I ajust the padding to the top the logo and social icons disappear under the slider.
The same thing happens if I change the percentage of 100px

Thanks

[Tom]

Try this instead:

.site-branding,
.site-logo,
.header-widget {
    position: relative;
    top: calc(50% – 100px);
}

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

[casimiro]

It doesn’t work, already I have proved it before answering.

[Tom]

That didn’t make those elements move at all? Perhaps try validating your CSS to make sure there are no syntax errors: https://jigsaw.w3.org/css-validator/#validate_by_input

Unfortunately, without seeing the site, we’re just guessing. Do you have a live server somewhere? If so, it shouldn’t take long to recreate this slider area only. That would allow me to give you a concrete solution.

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

[Author]

Posts