Move search bar to navbar

[Timotimoti]

Hi

How do i move the search bar from the header to the navbar?

[ozzy47]

In a default style it is in the navbar, not in the header.

[ndut]

@ozzy, can you tell how to Move search bar to navbar?
Because in my default style it is in the header, not in the navbar?

thank you

[ozzy47]

Wait I might just be wrong, I just noticed this is in the vB5 forum, not vB4.

[PSiggy]

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:
<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:
<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
/************************************************** *************************
* 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.

[Lynne]

I just used CSS to move mine:

#header .toolbar > ul li {
bottom: -70px;
position: relative;
}

[DemOnstar]

Hello there. . .

I took my clean header template and fiddled around with the examples above, the code I have looks like this. . .
The relevant lines are in red.

<div class="site-logo header-edit-box">
<a href="{vb:raw baseurl}/"><img src="{vb:stylevar titleimage}" data-orig-src="{vb:stylevar titleimage}" alt="{vb:phrase logo}" title="{vb:phrase powered_by_vbulletin_title}" /></a>
</div>
</div>

<vb:comment><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="$useSitebuilder">
<div class="disable-overlay"></div>
/</vb:if></vb:comment>
</div>

<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:if condition="!empty($page['channelid'])">
{vb:set navbarCurrentChannelId, {vb:var page.channelid}}
<vb:elseif condition="!empty($page['nodeid'])" />
{vb:set navbarCurrentChannelId, {vb:var page.nodeid}}
<vb:else />
{vb:set navbarCurrentChannelId, 0}
</vb:if>

{vb:data navbarItems, 'site', 'loadHeaderNavbar', '1', {vb:raw _SERVER.REQUEST_URI}, 0, {vb:var navbarCurrentChannelId}}
<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>
<vb:if condition="$useSitebuilder">
<div class="disable-overlay"></div>
/</vb:if>
</div>

<div id="channel-subtabbar" class="h-clearfix {vb:if empty($subnavItems), h-hide}">
<ul class="h-left">


To comply with the rule of my permitted 20000 characters, I had to remove the text above and below the affected area. Otherwise, this is my header template complete.

The result of this has put the search box in the navigation bar where I think it is intended.

However.
Should the screen of the computer be fully zoomed in,

https://vborg.vbsupport.ru/attachment.php?attachmentid=153651&stc=1&d=1447141209

You can see there are now 2 search box options and the nav bar search returns a warning.

https://vborg.vbsupport.ru/attachment.php?attachmentid=153650&stc=1&d=1447141209

Perhaps this is the result? Or perhaps I went wrong somewhere?
And why would anybody want to fully zoom in?

I have no idea how this behaves on a mobile device.

Thanks. . .

[Replicant]

You don't need to edit the template to move the search bar. You can do it with CSS. The search bar is automatically added to the navbar in responsive mode.

Here's a tutorial on vb.com that will help get you there.
http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028865-how-to-move-the-search-box-to-the-main-navigation-bar#post4028865

[DemOnstar]

You don't need to edit the template to move the search bar. You can do it with CSS. The search bar is automatically added to the navbar in responsive mode.

This is very true. However, because I chose to be rid of the header. .

#header {display: none;}
}

Glens code didn't work.

So instead, I opted to reduce the header height and pop out the site logo and slot that into the formula to end up with the intended result.

This is what I am using now and it seems to have ironed out all the creases.

#header {
height: 0;
}
#header .site-logo {
display: none;
}
#header { position: relative; }
#header .header-cell { width: 100%; }
#header .site-logo, #header .site-logo img { max-width: 100%; } /* makes logo spans the width of the header */
#header .site-logo { padding: 0; } /* remove padding around the banner logo */
#header .toolbar {
position: absolute;
right: 0; /* for LTR languages (change right to left for RTL; see note below) */
bottom: -29px; /* you may need to adjust this accordingly */
padding: 0;
width: auto;
}
/* reduce search box width from 168px to 120px or any size if you want */
.search-container .search-box .search-term { width: 120px;
}

Thanks again. . .

[luizalmir]

I just used CSS to move mine:

#header .toolbar > ul li {
bottom: -70px;
position: relative;
}


Hello!

I used this code, but the search bar is available only to registered users.
has as be available for visitors as well?

thank you!