How to move the Search box to the Main navigation bar
Collapse
X
-
So if just want to move the search box off to the right of the navbar, what do you do? -
-
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:
Code:#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; {vb:stylevar right}: 0; bottom: -29px; padding: 0; display: block; width: auto; } /* reduce search box width from 168px to 120px or any size if you want */ .search-container .search-box .search-term { width: 120px; }
Screenshot:
Leave a comment:
-
Try this one:
Code:#header { position: relative; height: auto; } #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 .site-logo img { display: block; } #header .toolbar { position: absolute; right: 0; bottom: -30px; padding: 0; width: auto; } [USER="3396"]media[/USER] only screen and (max-width: 440px) { #header .site-logo.header-edit-box { padding: 0; } }
[ATTACH=CONFIG]n4300587[/ATTACH]Leave a comment:
-
It definitely works if you add it to the correct css_additional.css template for your style.
Make sure you clear the system cache afterwards.Leave a comment:
-
Hi, I am trying to use the code, I put it in my CSS and it changes nothing. Any advise? I am using 5.1.5. ThanksLeave a comment:
-
This code worked for me on the vBCloud 5.1.5. Thanks.
Try this one:
Code:#header { position: relative; height: auto; } #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 .site-logo img { display: block; } #header .toolbar { position: absolute; right: 0; bottom: -30px; padding: 0; width: auto; } [USER="3396"]media[/USER] only screen and (max-width: 440px) { #header .site-logo.header-edit-box { padding: 0; } }
[ATTACH=CONFIG]n4300587[/ATTACH]Leave a comment:
-
I upgraded a site from 4.2.2 to 5.1.5 last week and put the original code in, it worked fine.Leave a comment:
-
Try this one:
Code:#header { position: relative; height: auto; } #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 .site-logo img { display: block; } #header .toolbar { position: absolute; right: 0; bottom: -30px; padding: 0; width: auto; } [USER="3396"]media[/USER] only screen and (max-width: 440px) { #header .site-logo.header-edit-box { padding: 0; } }
👍 1Leave a comment:
-
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. -
Related Topics
Collapse
-
by Flash04jvI have spent waaay too much time trying to figure this out. I find tons of info for editing html in the additional.css, but I can't find the CSS code for Cloud. Been trying and trying to make my own code...
-
Channel: vB Cloud Support & Troubleshooting.
-
-
by voygerhi good people
got few question
how to enable Today's Topics?
got problem with colour bar did install the colour bar as recommended don't show
anyone can gives a...-
Channel: Support Issues & Questions
-
-
by BugOutGirlI have put in the following code to my CSS file through site builder:
Code:#header { position: relative; } #header .header-cell { width: 100%; } #header .site-logo, #header .site-logo img { max-width:
-
Channel: Support Issues & Questions
-
-
by hussain2000hi
Kindly let me know how to remove the search box from the header
With my best regards-
Channel: Support Issues & Questions
-
-
by creaturexHi everyone,
Would someone be able to tell me how to change the position of the header ad in VB5 please?
I would like the header of my forum (http://forum.canadahifi.com/) to...-
Channel: Support Issues & Questions
-
Leave a comment: