[emocion]

Thanks to this forum posts I solve almost all my doubts.

But I am not able to place social icon and search bar in the header above, like in this website> http://www.srtalimon.com/2013/06/iconos-redes-sociales-cabecera.html

Exactly this is the position that I want in my site >> https://imageshack.com/i/ip9DsMl9j : Social icons in top header left and search form in top header right with the logo in the center (where it is now)

Can you help me?

Thank you very much for support.

[Mehmet S.]

Hi, it is not possible by default.

[emocion]

Ok, thanks Mehmet,

I’ve been reading here > http://www.pixelwars.org/forums/topic/social-buttons-below-menu-in-masonry/#post-5294

I follow your steps to put social icons “above the logo” using “style=”text-align: center;” but i can’t adjust social icons to the left corner. ¿Is it possible?

Thanks again!

[emocion]

Edit: I follow your steps using “style=”text-align: left;” but i can’t adjust social icons to the left corner.

[Mehmet S.]

Found a solution, try this way:

– add your social icons to your header with shortcodes and Text widget.

– add Search widget to your header after Text widget.

– use this in your Theme Options > Style > Custom CSS field:

.site-header .row {
position: relative;
}

.site-header .textwidget {
position: absolute;
top: 0;
}

.site-header #searchform {
position: absolute;
top: 0;
right: 0;
}

See in the image:

[emocion]

Thank you very much for your attention and perfect support Mehmet.

[Mehmet S.]

You are welcome.

[emocion]

Hi, one small detail. In the PC Browser works perfect but in the mobile browser overlaps the logo.

Can I disable this header modification only for mobiles?

Thank you

[Mehmet S.]

Edit the above CSS code:

@media screen and (max-width: 767px) {
.site-header .row {
position: relative;
}

.site-header .textwidget {
position: absolute;
top: 0;
}

.site-header #searchform {
position: absolute;
top: 0;
right: 0;
}
}

[emocion]

Works perfect, thanks Mehmet.

[Mehmet S.]

You are welcome.

[emocion]

Hi Mehmet! Excuse me for the delay, but I have confirmed that in the mobile browser overlaps the logo. I place the custom css that you put for me above but it seems finally dont work :(

You can see here >> https://imageshack.com/i/idwrme9up

Thanks mehmet!

[Mehmet S.]

Try this:

@media screen and (min-width: 767px) {
.site-header .row {
position: relative;
}

.site-header .textwidget {
position: absolute;
top: 0;
}

.site-header #searchform {
position: absolute;
top: 0;
right: 0;
}
}

[emocion]

Hi Mehmet! The icons still overlaps with this custom code.

Regards

[ahmetsali]

Hi, you have missed the curly bracket at the end of the custom css code @mehmetsali ‘s last post. Correct it and check again.

[berelkovsky]

I tried to make it, but I failed. Nothing happened. Could you please help me?
Thanks in advance!

[serkan]

Hi berelkovsky,
Could you please explain to me, what are you trying to do and you failed?
Thanks

[berelkovsky]

I did it>>

– add your social icons to your header with shortcodes and Text widget.

– add Search widget to your header after Text widget.

– use this in your Theme Options > Style > Custom CSS field:

.site-header .row {
position: relative;
}

.site-header .textwidget {
position: absolute;
top: 0;
}

.site-header #searchform {
position: absolute;
top: 0;
right: 0;
}

[serkan]

Hi berelkovsky,

Is your website lingvo-lang.com ? right

I could not see your custom css codes in the source code. Please deactivate all your plugin and try it again.

[berelkovsky]

Done

[berelkovsky]

It works now, but it doesn’t work for the Russian social networks OK.ru and VK.com

[berelkovsky]

By the way, the page twitter.com/username doesn’t work, should I change just for twitter.com?

[serkan]

It should work actually. Maybe there is a sytnax issue.
https://twitter.com/username

[berelkovsky]

Thank you.
In my browser it shows like “the page is not found”.

[serkan]

Hi berelkovsky,
Please try to use another social media plugin instead of this codes.
Thanks