Header bar – Pixelwars

Posted in : Read WP
emocion
Participant
21 August 2014 at 01:57
#15695

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.
Keymaster
21 August 2014 at 11:19
#15697

Hi, it is not possible by default.

emocion
Participant
21 August 2014 at 18:30
#15700

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
Participant
21 August 2014 at 18:32
#15701

Edit: I follow your steps using “style=”text-align: left;” but i can’t adjust social icons to the left corner.
Mehmet S.
Keymaster
21 August 2014 at 21:49
#15702
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
Participant
21 August 2014 at 23:56
#15703

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

Mehmet S.
Keymaster
22 August 2014 at 00:05
#15705

You are welcome.

emocion
Participant
22 August 2014 at 13:22
#15720

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.
Keymaster
22 August 2014 at 17:03
#15723
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
Participant
22 August 2014 at 18:58
#15726

Works perfect, thanks Mehmet.

Mehmet S.
Keymaster
24 August 2014 at 12:47
#15748

You are welcome.

emocion
Participant
9 September 2014 at 15:57
#15986

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.
Keymaster
11 September 2014 at 23:48
#16017
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
Participant
14 September 2014 at 11:36
#16035

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

Regards

ahmetsali
Keymaster
22 September 2014 at 00:09
#16169

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
Participant
6 June 2016 at 01:56
#31264

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

serkan
Moderator
6 June 2016 at 16:04
#31276

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

berelkovsky
Participant
7 June 2016 at 15:23
#31287

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
Moderator
7 June 2016 at 15:29
#31289

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
Participant
7 June 2016 at 18:08
#31291

Done

berelkovsky
Participant
7 June 2016 at 18:51
#31293

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

berelkovsky
Participant
7 June 2016 at 19:08
#31294

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

serkan
Moderator
7 June 2016 at 19:48
#31298

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

berelkovsky
Participant
7 June 2016 at 20:06
#31300

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

serkan
Moderator
8 June 2016 at 15:29
#31309

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