Header Right – Widgets to line up horizontally

Community Forums Forums General Discussion Header Right – Widgets to line up horizontally

This topic is: not resolved

This topic contains 7 replies, has 3 voices, and was last updated by  awohl 6 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #74728

    awohl
    Participant
    Post count: 7

    Using Executive Pro. I have 2 widgets in header right. google translation and simple social icons. They are currently stacked one on top of the other. I would like them to be side by side horizontally.

    Hopefully easy css to fix this?
    (website not live yet, in development mode)

    Thanks in advance!

    #74945

    braddalton
    Participant
    Post count: 9724

    Link to your site please.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #86498

    awohl
    Participant
    Post count: 7

    Would a screenshot do the trick for you?

    #86719

    braddalton
    Participant
    Post count: 9724

    Float one to the left and the other to the right using CSS.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #86733

    awohl
    Participant
    Post count: 7

    Was able to float social icon widget to right, just can’t get the other widget that is part of header right to move.
    I can make site live for a half hour so you can see…

    #86772

    braddalton
    Participant
    Post count: 9724

    You will need to use the correct classes. Here’s an example http://wpsites.net/web-design/make-enews-subscribe-widget-input-box-inline-with-submit-button/

    Here’s another http://wpsites.net/web-design/make-enews-subscribe-widget-input-box-inline-with-submit-button/

    http://wpsites.net/web-design/make-enews-subscribe-widget-input-box-inline-with-submit-button/

    These should give you an idea on how you can do it.

    Use:

    [css]
    .site-header .your-widget-class {
    float: left;
    }
    .site-header .your-widget-class {
    float: right;
    }
    [/css]

    You can also try changing the order of the widgets in the header right widget area.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #91704

    Besearched
    Participant
    Post count: 9

    I am also attempting to do something similar, and experiencing frustration with the end result!
    here is the url: http://besearched.biz/fivestars/

    here is the corresponding css
    .site-header .widget .textwidget #text-11 {
    float: left;
    width: 355px;

    }

    .site-header .widget .textwidget #text-12 {
    float: right;
    width:345px;

    }

    where am i screwing this up?

    #91717

    awohl
    Participant
    Post count: 7

    Hi Besearched – The website went live 2 weeks ago. http://www.DavidsDrugs.com . If you notice the “Click here and check out our monthly sales flyer!” link is to the left of the social icons on the homepage. I put the below code in the widget text box. All it needed was a div. I am not a master coder, but a friend of mine helped me out. Clearly for your needs, you would have to manipulate the below code, but hopefully it will give you insight as to how to do it. Hope this works for YOU and anyone else that visits this inquiry! Good luck!!! Amy

    <div style=”margin-top:-40px;margin-right:160px; text-align:right;”>CLICK HERE and CHECK OUT OUR MONTHLY SALES FLYER!</div>

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

You must be logged in to reply to this topic.