CSS Sticky Bar – Unable to place in middle

I have made a sticky bar in WordPress but I am unable to place the search form + some images next to each other on the right side of the bar & in the middle of the bar. Any help is appreciated.

Search form:

Read More
    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'boom' ); ?></label>
    <input type="text" class="field" name="s" value="Search for.. <?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Search &hellip;', 'boom' ); ?>" onblur="onBlur(this)" onfocus="onFocus(this)" />
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'boom' ); ?>" />
</form>

Sticky Bar: (I had to add the div id searchform because else it wouldn’t keep search form + images on the same line..)

<div id="sticky-header">
<div id="sticky-header-title">
    <a href="<?php echo bloginfo( 'url' ); ?>" title="<?php bloginfo( 'description' ); ?>"><?php echo $thsp_sticky_header_title; ?></a>
</div>
<div id="sticky-header-menu"><div id="searchform">
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25"  /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25"  /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25"  /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25"  /> 
    <?php get_search_form(); ?>
</div></div></div>

CSS:

#sticky-header {
    margin-top: -200px;
    padding: 8px 11px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99998;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-width: 1px 1px;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    -moz-box-shadow: 0px 15px 10px -10px #9F9F9F;
    -webkit-box-shadow: 0px 15px 10px -10px #9F9F9F;
    box-shadow: 0px 15px 10px -10px #9F9F9F;
}
#sticky-header-title {
    float: left;
    font-size: 22px;
    line-height: middle;
    margin: 0 !important;
}
#sticky-header-menu {
    float: right;
    text-align: right;
    margin: 0 !important;
}
#searchform form {
    display: inline;
    line-height: middle;
}

Print screen: http://oi44.tinypic.com/2113y0z.jpg neither the search bar or the images are on the middle of the bar (up-bottom)

Related posts

Leave a Reply

1 comment

  1. I am unable to place the search form + some images next to each other
    on the right side of the bar & in the middle of the bar

    Not entirely sure what you mean by this but:

    To display the search form on the right hand side you would use float: right. Try adding this to your CSS file

    #searchform {
        float: right;
    }