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 panel
How to move the Search box to the Main navigation bar
Collapse
X
-
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 */
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
-
Looks nice, good work there.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.com👍 1Comment
-
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 */
Comment
-
Comment
-
Comment
-
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; } }
👍 1Comment
-
I upgraded a site from 4.2.2 to 5.1.5 last week and put the original code in, it worked fine.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.comComment
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
-
Comment