Header widget display

Community Forums Forums Design Tips and Tricks Header widget display

This topic is: resolved

This topic contains 8 replies, has 3 voices, and was last updated by  wizz6113 1 year, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #73403


    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.



    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;



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



    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.




    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.



    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.



    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?



    • This reply was modified 1 year, 9 months ago by  wizz6113.
    • This reply was modified 1 year, 9 months ago by  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).

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.