insert logo and social icons into metaslider in header

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

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.

Now the site look that this:
[url=http://subefotos.com/ver/?bb2b46b6483b3653fb7e7ea874b3c941o.jpg][img]http://thumbs.subefotos.com/bb2b46b6483b3653fb7e7ea874b3c941o.jpg[/img][/url]
and before:
[url=http://subefotos.com/ver/?815ae997f8f55e5052c1916aef377d08o.jpg][img]http://thumbs.subefotos.com/815ae997f8f55e5052c1916aef377d08o.jpg[/img][/url]

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.

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?

[url=http://subefotos.com/ver/?675b6bad6a332421f49d5761c7821623o.jpg][img]http://thumbs.subefotos.com/675b6bad6a332421f49d5761c7821623o.jpg[/img][/url]

It don't work with the padding header

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

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

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.

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.

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.

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.

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

Try this instead:

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

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

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.