Header widget display

[chalfant]

Using the magazine Pro theme.

I tried placing the social media icons as a widget in the header area but it greatly increases the height and messes up the layout display of the text.

I knew how to fix this with the original magazine theme but it doesn't work with the html 5 theme.

It must be due to padding and predetermined size of the widget are, right?

Thanks if anyone can help but I have NOT left the widget there as I don't want my site displayed with this error.

http://thevaperstable.com/

[Brad Dalton]

Try changing the class from #header to .site-header.

Should be ok in your header right widget if using Simple Social Icons.

You can modify the CSS if needed:

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 728px;
}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
	padding: 40px 0;
	padding: 4rem 0;
}

.site-header .widget-area p {
	margin-bottom: 0;
}

---

Tutorials for StudioPress Themes.

[chalfant]

Appreciate your help Bad but I'm not sure how to do that.
Changing classes that is.

[Brad Dalton]

The old XHTML themes used #header for the header class and the new HTML 5 themes use .site-header. http://www.genesisframework.com/markup.php

The code above is included in your theme by default and can be modified if needed.

What happens if you place the Simple Social Icons widget in the header right widget area?

If you don't like the way it displays, you can modify the CSS i pasted above to change the way it displays.

Adding it to the end of yourt styloe sheet without modifying it won't do anything so you would need to place the icons in the widget area first and then modify the code to see the changes.

Otherwise you can load up a copy of your child theme locally and make the changes there first to test it works properly.

Also looks like you have reduced the width of your header right widget area probably to fit your header image in so you may need to reduce the size of the icons and the padding so it fits properly.

---

Tutorials for StudioPress Themes.

[chalfant]

Brad,

You're too kind, thank you.
I'll go play around with it on a local server and see if I can get it working.
I'll post back here a bit later.

Again, my thanks.

[chalfant]

No matter what I do nothing changes.
I don't understand why the widget area does not change it's position?

I've emailed support also.

[wizz6113]

I am having similar issue trying to float my simple social icons down to be more on a level with the custom site header. I've been tweaking .widget-area; .widget-wrap and .widget putting in padding-bottom or margin-bottom 0px. But while I've seen a small shift down, the SSIs are still to high.

Perhap I don't have the correct CSS terminology ( I used G-hooks mark-up to try and locate things) or do I now edit the plugin? I reduced the actual icons size and made them round as well. So I know they won't be floating in the right position within their area anyway.

Bit lost now as to how to proceed. Any ideas?

http://wpreneur.com/iicss/

Tnx.

[Brad Dalton]

Try these solutions which should help give you an idea.

Display Header Right Widget Custom Menu & Social Icons In-Line

http://wpsites.net/web-design/display-search-box-widget-in-line-with-social-icons-in-header-right/

---

Tutorials for StudioPress Themes.

[wizz6113]

Thanks Brad,
Now I've put a custom logo header on the left, which is bigger, the alignment looks less wrong. I've bookmarked your posts as I may well need to tweak further, but I'll first replace the original code in my theme - Outreach - before applying yours as it made no difference (probably being overridden).
Cheers.

[Author]

Posts