Social icons in header

[leo]

If this came up here before: sorry.

I have a floating-right secondary menu in the header. I would like to position the social media icon widget between the secondary menu (top) and the primary menu bar (bottom). Is this possible?

Here is a screenshot.

Thanks!

[Leo]

Hi there,

Looks like that white space is the header area?
If so you can add them in the Header Widget area.

Let me know.

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

[leo]

I can place the icons in the header as a widget, but I cannot get them to move to the right.

Screenshot

[Leo]

It should be default to the right – Can you check your setting in Customizer > Layout > Header > Header Width and set it to Full?

If that doesn’t work are you able to provide a link?

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

[leo]

I have Header Width set to Full and Inner Header Width set to Contained.

[leo]

Maybe I should add that I used css to move them downward a little:

.header-widget .widget {
padding-top: 40px;
}

But removing that doesn’t change anything.

[Leo]

Can you provide a link or on localhost?

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

[Leo]

ahh I see the secondary navigation is inside the header…so removing that padding-top code above should move the icons right next to the secondary navigation.

One way I would suggest is to set the the secondary Navigation Position to Above Header, Navigation Alignment to Right. (Customizer > Layout > Secondary Navigation)

Then the icons should move to the right with the secondary navigation above them.

Let me know if you prefer to have the secondary nav inside the header.

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

[leo]

I had it above the header before, but it increases the header height too much. So yes, I would prefer the secondary nav inside the header.

[leo]

OT: could you please remove the link? It’s a development site.

Thanks!

[leo]

I just found out that when I set the secondary menu’s height to 0, the icons move to the right, but then the menu collapses.

[Tom]

I would have to see the actual site to give exact CSS – I’m assuming it was removed?

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

[leo]

Yes, I don’t want it posted here. I emailed it to support@generatepress.com

[Leo]

Hi Leo,

I see that you have the secondary nav set to Above Header now.
If you prefer to have it inside header Float Right like before, this CSS should work:

.header-widget {
    clear: both;
}

Sorry it took so many attempts but this should work now. Let me know.

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

[Howard]

Hi Tom
Having same problem..
Using your social icons in header. It stays on right side even when I move it to center. (Desktop) On mobile seems to show left..above logo.
Wanted to try to move the icons to center of header as my logo is on left
Any suggestions
https://rawassertions.com
howard

[Author]

Posts