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:
<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 …', '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)
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