I don't know if my solution is the right way to go, but it works (at least for me). If anyone knows a better solution, definitely post it!
1) Go to your header template, search for this code and comment it:
HTML Code:
<div class="toolbar">
<ul class="h-right">
{vb:hook 'header_toolbar'}
{vb:data searchperm, user, hasPermissions, forumpermissions, cansearch}
<vb:if condition="$searchperm AND $vboptions['enablesearches']">
<li class="search-container">
<form id="searchForm" action="{vb:url 'search'}" class="h-left" method="GET">
<div class="h-left">
<div class="search-box search-btn-inside-box">
<input type="text" name="q" id="q" placeholder="{vb:phrase search}" class="textbox search-term" autocomplete="off" />
<button type="submit" id="btnSearch" class="search-btn" title="{vb:phrase search}"><span class="vb-icon vb-icon-search"></span></button>
<div class="vertical-divider-left"></div>
<div id="searchPopupControl" title="{vb:phrase filter_search}"><span class="vb-icon vb-icon-arrow-down-small"></span></div>
<div id="searchPopupContent">{vb:template search_popup, page={vb:raw page}, user={vb:raw user}}</div>
</div>
</div>
</form>
</li>
</vb:if>
</ul>
</div>
<vb:if condition="$user['can_use_sitebuilder']">
<div class="disable-overlay"></div>
</vb:if>
2) There is "channel-tabbar" div right below the code you've just commented. Create new div with "navigationbar" id at the end of "channel-tabbar".
3) From the code you've commented, select whole "<ul class="h-right">" and paste it into the newly created div. Your "channel-tabbar" should look like this:
HTML Code:
<div id="channel-tabbar" class="h-clearfix noselect">
<ul class="h-left">
<vb:comment>responsive:markup:move and rebuild search</vb:comment>
<li id="mobile-main-menu" class="mobile sections">
<div id="mobile-main-menu-sections">
<div class="main-menu-control-sections collapsed">
<span class="sections-menu-icon"><span class="icon h-left collapsed" ></span></span>
<span class="sections-title collapsed">{vb:phrase sections}</span>
<span class="sections-icon"><span class="icon h-left collapsed"></span></span>
</div>
</div>
<div id="mobile-main-menu-search"></div>
<span class="mobile-search"><span class="icon h-right"></span></span>
</li>
{vb:data navbarItems, 'site', 'loadHeaderNavbar', '1', {vb:raw _SERVER.REQUEST_URI}}
<vb:each from="navbarItems" value="navbarItem">
{vb:set navbarTitle, {vb:raw navbarItem.title}}
{vb:set normalizedUrl, {vb:raw navbarItem.normalizedUrl}}
<vb:if condition="$targetAttr = !empty($navbarItem['newWindow']) ? ' target=\'_blank\'' : ''"></vb:if>
<vb:if condition="!empty($navbarItem['attr'])">
{vb:strcat targetAttr, ' '}
{vb:strcat targetAttr, {vb:raw navbarItem.attr}}
</vb:if>
<vb:if condition="$itemUrl = $navbarItem['isAbsoluteUrl'] ? $normalizedUrl : ($baseurl . '/' . $normalizedUrl)"></vb:if>
<vb:if condition="$atCurrentItem = !empty($navbarItem['current'])"></vb:if>
<vb:if condition="$currentClass = $atCurrentItem ? 'current' : ''"></vb:if>
<vb:if condition="$atCurrentItem">{vb:set subnavItems, {vb:raw navbarItem.subnav}}</vb:if>
<li class="{vb:raw currentClass} section-item">
<a{vb:raw targetAttr} href="{vb:raw itemUrl}" class="h-left {vb:var navbarTitle}">{vb:phrase {vb:raw navbarTitle}}</a>
<span class="mobile dropdown-icon"><span class="icon h-right"></span></span>
</li>
</vb:each>
{vb:hook 'header_tabbar'}
</ul>
<div id="navigationbar">
<ul class="h-right">
{vb:hook 'header_toolbar'}
{vb:data searchperm, user, hasPermissions, forumpermissions, cansearch}
<vb:if condition="$searchperm AND $vboptions['enablesearches']">
<li class="search-container">
<form id="searchForm" action="{vb:url 'search'}" class="h-left" method="GET">
<div class="h-left">
<div class="search-box search-btn-inside-box">
<input type="text" name="q" id="q" placeholder="{vb:phrase search}" class="textbox search-term" autocomplete="off" />
<button type="submit" id="btnSearch" class="search-btn" title="{vb:phrase search}"><span class="vb-icon vb-icon-search"></span></button>
<div class="vertical-divider-left"></div>
<div id="searchPopupControl" title="{vb:phrase filter_search}"><span class="vb-icon vb-icon-arrow-down-small"></span></div>
<div id="searchPopupContent">{vb:template search_popup, page={vb:raw page}, user={vb:raw user}}</div>
</div>
</div>
</form>
</li>
</vb:if>
</ul>
</div>
</div>
Now you have your search button in the navigation bar. Problem is, that its CSS relies on inheriting from its former parent quite a lot.
4) Paste this code into your additional.css
HTML Code:
/***************************************************************************
* Search Container
**************************************************************************/
.search-container {
margin: 0px 0px 0px;
}
#navigationbar .toolbar .search-container {
margin-top:0;
margin-{vb:stylevar right}:0;
margin-bottom:0;
}
.search-container .search-box {
position:relative;
top: -2px;
}
.search-container .search-box .search-term {
height:18px;
border-color:#1C1C21;
padding-{vb:stylevar left}:5px;
padding-{vb:stylevar right}:26px;
padding-top:3px;
padding-bottom:3px;
margin:0;
width:168px;
color: {vb:stylevar header_search_input_text_color};
background:#F0F1F2;
line-height:16px;
outline:none;
vertical-align: middle;
}
#navigationbar .search-container .search-box .search-term {
-webkit-box-shadow: inset {vb:stylevar pos}1px 1px 1px 0px #E0E0E0;
-moz-box-shadow: inset {vb:stylevar pos}1px 1px 1px 0px #E0E0E0;
box-shadow: inset {vb:stylevar pos}1px 1px 1px 0px #E0E0E0;
background: {vb:stylevar header_search_input_background};
border-top: {vb:stylevar header_search_input_border};
border-{vb:stylevar left}: {vb:stylevar header_search_input_border};
border-bottom: {vb:stylevar header_search_input_border};
border-{vb:stylevar right}: 0;
-moz-border-top-{vb:stylevar right}-radius:0;
-webkit-border-top-{vb:stylevar right}-radius:0;
border-top-{vb:stylevar right}-radius:0;
-moz-border-bottom-{vb:stylevar right}-radius:0;
-webkit-border-bottom-{vb:stylevar right}-radius:0;
border-bottom-{vb:stylevar right}-radius:0;
}
#navigationbar .search-container .search-box .search-term.placeholder {
color: {vb:stylevar header_search_placeholder_text_color} !important;
}
#navigationbar .search-container .search-box .search-term::-webkit-input-placeholder {
color: {vb:stylevar header_search_placeholder_text_color} !important;
}
#navigationbar .search-container .search-box .search-term:-moz-placeholder {
color: {vb:stylevar header_search_placeholder_text_color} !important;
}
.search-container .search-box .search-btn {
height:27px;
vertical-align: middle;
}
<vb:comment>responsive:css:changed top 1px to 5px</vb:comment>
.search-container .search-box.search-btn-inside-box .search-btn {
position:absolute;
top:5px;
{vb:stylevar right}:4px;
background: #212A33 url(images/css/sprite_gradients_vb.png) repeat-x scroll 0 -700px;
height: 26px;
width: 27px;
padding: 0;
border: 0;
cursor:pointer;
-moz-border-radius: 1px;
-moz-border-radius-top{vb:stylevar left}: 0;
-moz-border-radius-bottom{vb:stylevar left}: 0;
-webkit-border-radius: 1px;
-webkit-border-top-{vb:stylevar left}-radius: 0;
-webkit-border-bottom-{vb:stylevar left}-radius: 0;
border-radius: 1px;
border-top-{vb:stylevar left}-radius: 0;
border-bottom-{vb:stylevar left}-radius: 0;
}
#navigationbar .search-container .search-box.search-btn-inside-box .search-btn {
background: {vb:stylevar button_secondary_background};
border: {vb:stylevar header_search_input_border};
-moz-border-radius: 3px;
-moz-border-radius-top{vb:stylevar left}: 0;
-moz-border-radius-bottom{vb:stylevar left}: 0;
-webkit-border-radius: 3px;
-webkit-border-top-{vb:stylevar left}-radius: 0;
-webkit-border-bottom-{vb:stylevar left}-radius: 0;
border-radius: 3px;
border-top-{vb:stylevar left}-radius: 0;
border-bottom-{vb:stylevar left}-radius: 0;
position: relative;
top: 0px;
width:28px;
padding:4px 0px 0px 2px;
display: inline-block;
line-height: normal;
}
#navigationbar .search-container .search-box.search-btn-inside-box .vertical-divider-left {
border:0;
border-{vb:stylevar right}: 1px solid #BDBDBD;
display: inline-block;
height: 16px;
top: 12px;
width: 0;
position: absolute;
{vb:stylevar right}: 52px;
}
#navigationbar .search-container .search-box.search-btn-inside-box .vertical-divider-right {
border:0;
border-{vb:stylevar right}: 1px solid #BDBDBD;
display: inline-block;
height: 25px;
position: absolute;
{vb:stylevar right}: 28px;
margin-top: 1px;
width: 0;
}
.search-container .adv-search-btn {
margin-{vb:stylevar left}:0px;
}
#navigationbar .search-container .adv-search-btn {
margin-{vb:stylevar left}: 0px;
display: inline;
padding: 0;
font-size: 11px;
color: rgb(35, 121, 181);
height: auto;
}
#navigationbar ul li a:hover {
background: none;
}
#navigationbar .search-container .searchPopupBody {
text-transform: none;
}
.search-container .searchPopupBody label {
display: block;
line-height:20px;
word-wrap:break-word;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 11px;
}
.search-container .searchPopupBody label input,
.search-container .searchPopupBody label .vb-icon.vb-icon-adv-search {
vertical-align:middle;
margin-bottom:4px;
margin-{vb:stylevar right}:5px;
margin-{vb:stylevar left}:0;
margin-top:3px;
}
.search-container .searchPopupBody a {
margin-{vb:stylevar left}: 24px;
line-height:18px;
}
.ie8 .search-container .searchPopupBody a {
margin-{vb:stylevar left}: 30px;
line-height:24px;
}
#navigationbar .search-container #searchPopupControl {
top: 8px;
}
#navigationbar .search-container #searchPopupContent, .search-result-header .PopupContent {
top: 31px;
}
/**
* End of Search Container
**/
You might need to adjust your CSS a bit more, but that's individual and you shouldn't have problem with that. Hope this helped.
More Information