How to move the Search box to the Main navigation bar

[Glenn Vergara]

There are cases where you want to add a banner that spans the width of the container. But the Search box on the right gets in the way. You can solve this by modifying the header template but you have to know what you're doing so as not to mess up the template.

But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template:

#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; }

Note:

• The css used to use stylevars for the text-direction but stylevars don't seem to be working on additional css anymore, so you have to hardcode "right" for LTR and "left" for RTL. (this is only true when using Sitebuilder. For self-hosted version, you can use sylevars when editing css_additional template)
• If you have a lot of main navigation menu items, the search box may cover them when you shrink the window size until you resize it down further that the Responsive design for mobile screen kicks in and hides the search box and replaces it with the mobile search box.

[Graham Walters]

Been wanting to do this for ages thanks !

[Graham Walters]

Tried this on 5.1.0 and it moves the search box half way down the page.

[Glenn Vergara]

Can you post or PM a link to your site?

[Graham Walters]

Can you post or PM a link to your site?

Upgraded to 5.1.1 and it works fine now. Thanks !

[Graham Walters]

This doesn't work on the orange/purple theme for 5.1.2.A

http://www.premierleagueforum.co.uk/channels

***EDIT***

Doesn't work when upgrading on some of the themes, but does on others, works on all themes with fresh install.

[glide]

Hi - Could you tell me what directory css_additional.css is in? I cannot find it.

EDIT: Nevermind - I got it - Thx!

[Captain Atkin]

I never know where to find this either.

[Glenn Vergara]

Captain Atkin, the css_additional.css template can be found by searching for it in AdminCP > Styles & Templates > Search in Templates. Starting 5.1.2, you can also update this template by going to Sitebuilder > Style > CSS Editor and then selecting an appropriate style.

[glide]

Now that I have moved the search bar I cannot figure out how to get a logo into the larger space. It says it can still only be 320 px wide, and if I try to upload one that goes all the way across, it compresses it down. How do I do that?

[stevie1972]

I would like to move the search box to the navbar on my vb cloud forum. How do I do this please ?

[Graham Walters]

Now that I have moved the search bar I cannot figure out how to get a logo into the larger space. It says it can still only be 320 px wide, and if I try to upload one that goes all the way across, it compresses it down. How do I do that?

Add this to your css_additional_css

#header .site-logo img {
height:auto;
width:auto;
max-width:900px;
}

Change max-width to the number of pixels you want

[Da G]

I would like to move the search box to the navbar on my vb cloud forum. How do I do this please ?

Another here.

Does Cloud allow that?

[Mark.B]

Yes, once your cloud forum has been upgraded to 5.1.2, you'll be able to add the code to css_additional.css via site builder in the front end. . Please post back if anyone's unsure how to do this.

[Da G]

Yes, once your cloud forum has been upgraded to 5.1.2, you'll be able to add the code to css_additional.css via site builder in the front end. . Please post back if anyone's unsure how to do this.

A li'l step by step guide would be HIGHLY appreciated.

Thanx in advance.

[Glenn Vergara]

Add this to your css_additional_css

#header .site-logo img {
height:auto;
width:auto;
max-width:900px;
}

Change max-width to the number of pixels you want

You can simplify it by using max-width:100% and setting height/width to auto is not needed as they are already set as auto. But having that is not enough to make the logo spans the width of the header. You also need to set max-width:100% on the .site-logo div.

#header .site-logo, #header .site-logo img { max-width: 100%; }

I updated the CSS on the first post with this.

[Graham Walters]

You can simplify it by using max-width:100% and setting height/width to auto is not needed as they are already set as auto. But having that is not enough to make the logo spans the width of the header. You also need to set max-width:100% on the .site-logo div.

#header .site-logo, #header .site-logo img { max-width: 100%; }

I updated the CSS on the first post with this.

I set it like that, prior to seeing the hack to move the searchbar, if you used the 100% prior to that, the search bar would conflict with the logo