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 8 months, 1 week ago.

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

    chalfant
    Participant
    Post count: 132

    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/
    #73547

    braddalton
    Participant
    Post count: 10349

    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:

    [css]
    .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;
    }
    [/css]


    #73929

    chalfant
    Participant
    Post count: 132

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

    #73931

    braddalton
    Participant
    Post count: 10349

    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.


    #73932

    chalfant
    Participant
    Post count: 132

    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.

    #73993

    chalfant
    Participant
    Post count: 132

    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.

    #92116

    wizz6113
    Member
    Post count: 78

    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.

    • This reply was modified 8 months, 1 week ago by  wizz6113.
    • This reply was modified 8 months, 1 week ago by  wizz6113.
    #92215

    braddalton
    Participant
    Post count: 10349
    #92291

    wizz6113
    Member
    Post count: 78

    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.

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

You must be logged in to reply to this topic.