Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header widget display
Tagged: header, simple social icons, widget layout
- This topic has 8 replies, 3 voices, and was last updated 10 years, 1 month ago by wizz6113.
-
AuthorPosts
-
November 16, 2013 at 9:17 am #73403chalfantMember
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/November 17, 2013 at 6:25 am #73547Brad DaltonParticipantTry 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; }
November 18, 2013 at 7:36 am #73929chalfantMemberAppreciate your help Bad but I'm not sure how to do that.
Changing classes that is.November 18, 2013 at 7:53 am #73931Brad DaltonParticipantThe 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.
November 18, 2013 at 8:04 am #73932chalfantMemberBrad,
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.
November 18, 2013 at 1:17 pm #73993chalfantMemberNo 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.
February 24, 2014 at 7:39 am #92116wizz6113MemberI 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?
Tnx.
February 24, 2014 at 5:40 pm #92215Brad DaltonParticipantTry these solutions which should help give you an idea.
http://wpsites.net/web-design/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/
February 25, 2014 at 6:42 am #92291wizz6113MemberThanks 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. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.