Utility bar width, horizontal and alignment in streamline pro

Community Forums Forums General Discussion Utility bar width, horizontal and alignment in streamline pro

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 1 year, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #86175


    Hey there

    I have added a utility bar above header at my site, but I have three questions.

    1) How do I chance the color width? – Right now its full wide, and I want it to be 1140px. (see code below)
    2) I have made a left aligned bar, a a center aligned and a right aligned bar, but when I test it, the right bar is shown at the center, and the the center aligned and left aligned are shown at the left. Anyone, who can tell me, what I have done wrong (see code below)
    3) Finally I want to ask how I change the menu to a horizontal menu?

    This is the code in function.php:

    //* Add Utility bar above header
    add_action( ‘genesis_before_header’, ‘utility_bar’ );
    function utility_bar() {

    echo ‘<div class=”utility-bar”><div class=”wrap”>';

    genesis_widget_area( ‘utility-bar-left’, array(
    ‘before’ => ‘<div class=”utility-bar-left”>’,
    ‘after’ => ‘</div>’,
    ) );

    genesis_widget_area( ‘utility-bar-center’, array(
    ‘before’ => ‘<div class=”utility-bar-center”>’,
    ‘after’ => ‘</div>’,
    ) );
    genesis_widget_area( ‘utility-bar-right’, array(
    ‘before’ => ‘<div class=”utility-bar-right”>’,
    ‘after’ => ‘</div>’,
    ) );
    echo ‘</div></div>';


    And this is the style css:

    /* Utility Bar
    ——————————————— */

    .utility-bar {
    background-color: #d8cba9;
    border-bottom: 1px solid #ddd;
    color: #ddd;
    font-size: 16px;
    font-size: 1.6rem;
    padding: 10px 0px;
    padding: 1rem;

    .utility-bar a {
    color: #8b7b5a;

    .utility-bar a:hover {
    text-decoration: underline;

    .utility-bar-right {
    width: 50%;

    .utility-bar-left p,
    .utility-bar-center p,
    .utility-bar-right p {
    margin-bottom: 0;

    .utility-bar-left {
    float: left;

    .utility-bar-center {
    float: center;
    text-align: center;

    .utility-bar-right {
    float: right;
    text-align: right;

    .utility-bar input[type=”search”] {
    background: inherit;
    padding: 10px 0 0;
    padding: 1.0rem 0 0;

    I hope someone can answer.




    As you posted this over 2 months ago, I hope you were able to get your issue resolved. If not, please come back and update this thread, and I will escalate for you.

    If it is resolved, please mark it “resolved”, so it can be closed.


    Susan @ One Happy Studio I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

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

You must be logged in to reply to this topic.