The question was asked by @Traveler7777 via Twitter:
Please show me how to set the width of our navigation bar to 100% and move the login and search box below the navigation. Thx.
No problem. It’s easy to do, and involves pasting the following CSS into the Ads & Custom HTML Section, in the Head and Meta Data box (if you want it to apply to all pages), or in the Page Settings area, in the Page Meta Data area (if you want it to apply to only one page). Please note that this solution will “hide” the login box from its current location. If you do not want to hide the box, then you can instead use the optional code below to LOWER it by 18px. (remove the “//” from the margin-top and put that in front of the “display:none;”)
<style>
div#sidebar {
display:none;
//margin-top:15px;
}
div#container {
width:975px;
}
div#navigation-wrapper {
width:100%;
}
</style>
Hi Spence,
It seems the code pushes the sidebar below the content page. (We have the sidebar on the right side?!) Any idea?
We also still have two nav tabs that are wrapped and moved to the second line.
NAV | NAV | NAV | NAV | NAV
NAV | NAV
Thanks for the help!!!
Send us the link to your site so we can apply the code live and get it tweaked
Traveller7777
After reviewing your site, we have the following:
The issue is that you have your main body content too wide, and as a result, you need to make your div#wrapper-container at least 1200px wide to give enough room for everything:
Add this code to your site Ads & Custom HTML Area:
div#wrapper-container {
margin:0 auto 0 256px;
width:1200px;
}
div#container {
width:800px;
}
When I use that code it shifts the sidebar up above my navigation bar A LOT
This was the code I used, the modified one to just lower it, not completely make it disappear:
div#sidebar {
//display:none;
margin-top:15px;
}
div#container {
width:975px;
}
div#navigation-wrapper {
width:100%;
}
Heres the best screen shot I could get:
http://s578.photobucket.com/albums/ss224/JohnnyScience/?action=view¤t=Untitled3.png
I’ve updated the solution a bit as well based on your feedback:
Add this additional CSS:
ul#main-navigation {
width:900px;
}
div#container {
width:790px;
}
div#body-container {
width:980px;
}
That did it. Many thanks Spence. Keep up the great work.
Ok the additional code worked, but my navigation bar didnt move over to the left to take up the space that my right side bar was before I lowered it.
I’ve attached a pic what it looks like now, the side bar is well below the navigation bar. I had to change the margin to 60 to clear the 2nd row of the tab doctor:
http://s578.photobucket.com/albums/ss224/JohnnyScience/?action=view¤t=Untitled24.png
And here is the code as I have it in my Meta data. Its the first thing, before all of the other stuff you modified for me.
div#sidebar {
//display:none;
margin-top:60px;
}
div#container {
width:975px;
}
div#navigation-wrapper {
width:100%;
}
ul#main-navigation {
width:900px;
}
div#container {
width:790px;
}
div#body-container {
width:980px;
}
hey spence, i have try this code you gave but seems doesnt work with my website, do i need a different code or what?
please let me know
thanks.
Hi Isaac,
check that you have your style tags in the proper place.
this code drops the nav bar from the left but doesn’t increase the width of the body, it simply shifts it to the left where the nav bar was. hmmmm….
Hi Lionel,
if used properly, the div#body-container part is what causes the body to increase. Perhaps you have some other code in your CSS already that is overriding that attribute?
If you are interested, we are happy to provide you with a custom CSS consultation in an “Hour of Power”. Just click http://labsecrets.com/questions and reserve the block of time with PayPal, and we can get you setup easy
Cheers,
Spence
have checked back and (SocGo standard code aside) no additional CSS code present
@Lionel
Do you want to share your site url and we can tweak it from here (if the pages are visible to the public)?
yes please! there’s an example of a fully public page at http://www.yourpubquiz.com/revolution
while you’re there i have used screenr to screencast a powerpoint presentation (which in 2 minutes tells you what i’m all about)
whilst your help is still really appreciated, i’m starting to think i should move away from socialgo to buddypress….
whilst your help is still really appreciated, i’m starting to think i should move away from socialgo to buddypress…
Truer words have never been spoken….
I have no clue how to code and all the codes here are missing characters. can someone please help me I need to change the color of my chat bar and move it to the top of my website rather the bottom
Hi Keedon,
what characters are missing? It’s all there:
Just copy that to your Ads & Custom HTML area and paste into the head and meta data box.
If you need help, just email us at help@labsecrets.com