How to move the Search box to the Main navigation bar
Collapse
X
-
-
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. ThanksComment
-
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.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.comComment
-
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]Comment
-
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:
Comment
-
-
I tried this with 5.1.7 and it placed the search box off to the right of the navbar.
Disregard, brainless fixed it.Last edited by Craig; Wed 24 Jun '15, 12:31pm.adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
-
The search box goes off the right of the navbar due to
Code:{vb:stylevar right}: 0;
Code:right: 0; /* For LTR languages */
Code:left: 0; /* For RTL languages */
👍 1Comment
-
I so want to get rid of this search button from the header area but I do not have the expertise or the confidence to do it myself and know virtually nothing about code. I had a look for the particular part of the code that needs to be changed but I couldn't find it.Comment
-
I'm sorry, we don't allow asking for paid services here...our sister site www.vbulletin.org does have a paid requests section, you could try asking there.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.comComment
-
adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
-
Try adjusting the
#header { height: edit here; }Comment
-
Code:#header .site-logo img { display: block; }
Comment
-
No such luck. There must be something else tripping it up? http://schollloj.com/adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
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.
Thu 12 Nov '15, 3:58pm -
-
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
Wed 15 Nov '17, 11:09am -
-
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
Tue 10 Mar '15, 3:38pm -
-
by hussain2000hi
Kindly let me know how to remove the search box from the header
With my best regards-
Channel: Support Issues & Questions
Tue 18 Aug '20, 2:55am -
-
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
Thu 7 Aug '14, 1:19pm -
Comment