Custom Search Bar

Hello,

[sb_private_reply]We Really Apologize about the Delay in replying to your Support Query and Truly Truly appreciate your Patience with us![/sb_private_reply]

We are indeed using Canvas for Our Support Forum but the Search Bar is Custom. Consider using the following custom CSS Code:

.big-search {
	position: relative;
	clear: both;
}

.big-search i {
	position: absolute;
	top: 0;
	left: 10px;
	width: 60px;
	height: 60px;
	font-size: 24px;
	line-height: 57px;
}

.big-search .border-form-control {
	font-size: 25px;
	height: 60px;
	padding: 16px 4px;
	padding-left: 55px;
	border-bottom: 2px solid #DDD;
}

.big-search .border-form-control:focus { border-bottom-color: #666; }

.big-search .border-form-control::-moz-placeholder {
	color: #BBB;
	font-weight: 400;
}

.big-search .border-form-control:-ms-input-placeholder {
	color: #BBB;
	font-weight: 400;
}

.big-search .border-form-control::-webkit-input-placeholder {
	color: #BBB;
	font-weight: 400;
}

and then the following HTML Code:

<form class="big-search divcenter" style="max-width: 700px;" method="get" action="#">
	<i class="icon-line-search"></i>
	<input type="text" class="sm-form-control border-form-control" value="" name="bbp_search" placeholder="Search FAQs &amp; Topics...">
</form>

This should definitely work fine.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hello,

This is Definitely Possible and you can surely use the Codes directly from the Bootstrap: http://getbootstrap.com/components/#input-groups-buttons-dropdowns .

Example Code:

<div class="input-group input-group-lg">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>
	</div><!-- /btn-group -->
</div><!-- /input-group -->

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.