How to move the Search box to the Main navigation bar
Collapse
X
-
-
-
Thanks, now is perfect in the my forum, this is the link: http://www.gamesitalia.it/forum/
Code:#header .site-logo { padding: 0; } /* remove padding around the banner logo */
Leave a comment:
-
If I want to remove the logo, and just have a banner image across the screen, how do I do it? I know how to get the banner image in there, but how do I delete the logo?Leave a 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:
Leave a comment:
-
I can see from your site http://www.osras.org/ the banner has max-width of 100% and it looks good. It would look better if you remove the padding around the banner logo by adding this:
Code:#header .site-logo { padding: 0; } /* remove padding around the banner logo */
Leave a comment:
-
Leave a comment:
-
I used your code and it worked great, but since i made my logo the width 1180 the search box has moved to the side panelLeave a comment:
-
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.
Code:#header .site-logo, #header .site-logo img { max-width: 100%; }
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 logoLeave a comment:
-
Code:#header .site-logo, #header .site-logo img { max-width: 100%; }
Leave a comment:
-
Leave a comment:
-
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.Leave a 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 -
Leave a comment: