Site logo

Archived topic

Social icons in header

17 replies · Started by leo on January 9, 2017

Viewing posts 1–15 of 18

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!

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.

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

Screenshot

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?

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

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.

Can you provide a link or on localhost?

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.

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.

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

Thanks!

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.

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

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.

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

This archived topic is closed to new replies.