Another here.
Does Cloud allow that?
How to move the Search box to the Main navigation bar
Collapse
X
-
#header .site-logo img {
height:auto;
width:auto;
max-width:900px;
}
Change max-width to the number of pixels you wantLeave a comment:
-
I would like to move the search box to the navbar on my vb cloud forum. How do I do this please ?Leave a comment:
-
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?Leave a comment:
-
This doesn't work on the orange/purple theme for 5.1.2.A
***EDIT***
Doesn't work when upgrading on some of the themes, but does on others, works on all themes with fresh install.Last edited by Graham Walters; Sun 8 Jun '14, 9:06am.Leave a comment:
-
-
Tried this on 5.1.0 and it moves the search box half way down the page.Leave a comment:
-
How to move the Search box to the Main navigation bar
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; 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; }
- 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.
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: