hi
I am not sure about ,,what you mean by residing the navbar at the bottom of header field.
do you want to put it under the logo or just align with the bottom of logo ?
For not allowing the navbar to collapse with the logo,
Just fix the header width.
something of this sort will help.
#header{width:1000px;}
Put it in your screen.css or find the #header selector and put the width you want there.
Thanks Brajesh. I will try that out.
As for what I mean about where the navbar resides, yes I was wondering if I could get it at the bottom of the header field. I must be missing something because I’ve been messing with this for a while and haven’t gotten it. Something tells me it’s something really simple that I’m overlooking. I’ll let you know how the tips you gave me work out Brajesh; thanks again.
Just an update: I see what that line of coding does. Basically gave the header a fixed size instead of being able to stretch. I guess what I’m looking to do may not be possible, but this is it – allow for header to still be dynamic with the increase/decrease of window size BUT when navbar ‘collides’ with logo area, navbar stops and does not shift position.
I wonder if that is even possible.
Update: Figured out how to move the navbar down; and yes, it was so simple (sigh).
Now I am still running into the issue where the navbar shifts down when it collides with the logo frame. I’ve tried several overflow options on the header but those just ended up jacking the layout up.
Any help would be greatly greatly appreciated, as this is bugging me so much for such a little thing.
Just to give anyone that views this an idea of what I’m talking about, please see this site:
http://cfcommunity.net/FOK2009/
Notice that their navbar stops moving completely after the window is shortened (width wise) a certain amount?
Back on my site: http://www.up-your-game.com/wordpress-mu you can see that mine completely moves after a certain width decrease of the browser. Any thoughts on how this can be accomplished on my page?
You can do that with css, use min-width. This will make sure that the container will not shrink after it reached a point that you define (example: #wrapper { min-width: 200px; }).
sorry,could not reply yesterday. as Xevo pointed ,set a min width for body or wrapper,but remember ,It is not going to work at least in IE 6(IE6,does not supports min-width,a work around will be using _width property(note the underscore for IE6).
Thanks guys, trying this out now. I’ll report the outcome.
