Agency Pro – Header right widgets

Community Forums Forums Design Tips and Tricks Agency Pro – Header right widgets

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  Steve@BHQ 6 months ago.

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

    Steve@BHQ
    Participant
    Post count: 96

    I currently have two widgets in the “Header Right” widget area” custom menu & social icons. I’d like the social icons to be at the end of the nav. How do I do that?
    Thank You, Steve

    http://bassanglerhq.com/justinlucas2014/
    #102421

    Lauren @ OnceCoupled
    Member
    Post count: 611

    You just want to add some CSS to style them:

    .site-header .widget {
         float: left;
         width: 90%;
    }
    .site-header .widget:last-child {
         width: 10%;
    }

    You may need to add some additional styles to make it look better or to compensate for smaller screen sizes.

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102432

    Steve@BHQ
    Participant
    Post count: 96

    did you mean the “.site-header .widget-area {”
    Also, there is no “.site-header .widget:last-child {

    Below is what I currently have

    /* Widget Area
    ——————————————— */

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

    .site-header .widget-area li {
    margin: 0;
    padding: 0;
    }

    .site-header .search-form {
    float: right;
    margin-top: 24px;
    margin-top: 2.4rem;
    }

    /*

    #102435

    Steve@BHQ
    Participant
    Post count: 96

    Update: here’s what I have.
    /* Widget Area
    ——————————————— */

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

    .site-header .widget-area li {
    margin: 0;
    padding: 0;
    }

    .site-header .search-form {
    float: right;
    margin-top: 24px;
    margin-top: 2.4rem;
    }

    /*

    #102438

    Lauren @ OnceCoupled
    Member
    Post count: 611

    You need to add the CSS I gave you, or some modification of it, to your style sheet.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102502

    Steve@BHQ
    Participant
    Post count: 96

    Ok, I added the css you gave me. But the last nav item was wrapped below. So I made .genesis-nav-menu { 105% and it seemed to have worked. Is that the right way to do it?

    #102717

    Lauren @ OnceCoupled
    Member
    Post count: 611

    Sure. It overflows a little, meaning there isn’t extra spacing between the menu and logo at some specific screen sizes. If it works for you though…


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102719

    Steve@BHQ
    Participant
    Post count: 96

    Awesome thx. Any chance you have any suggestions on this one? http://www.studiopress.com/forums/topic/agency-pro-home-widgets/

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

You must be logged in to reply to this topic.