Skip to:
Content
Pages
Categories
Search
Top
Bottom

Navbar issues

  • Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    Hello all. I searched around and could not find any specific information in regards to this and the edits I have attempted do nothing. Basically, I am trying to setup a way that the navbar stays in an bsolute position. Right now it justifies to the right, but if the page is made smaller it starts to have some strange effects that I am not too happy with. Here is the link to the site I’m currently working on: http://www.up-your-game.com/wordpress-mu/

    Using firebug I can see the container fields and would like to do a couple of things:

    1) Make the navbar reside on the bottom portion of the header field.

    2) Make the navbar stay in it’s position even when the page is made smaller; i.e. make scrollbar appear instead of moving the navbar position.

    I guess a better way to explain it would be that when the navbar is about to collide with the logo field, I would like the navbar to NOT move and instead, create a scrollbar. Any help would be greatly appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Avatar of Brajesh Singh
    Brajesh Singh
    Participant

    @sbrajesh

    3 years, 5 months ago

    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.

    Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    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.

    Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    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.

    Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    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.

    Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    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?

    Avatar of Xevo
    Xevo
    Participant

    @xevo

    3 years, 5 months ago

    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; }).

    Avatar of Brajesh Singh
    Brajesh Singh
    Participant

    @sbrajesh

    3 years, 5 months ago

    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).

    Avatar of illwill79
    illwill79
    Participant

    @illwill79

    3 years, 5 months ago

    Thanks guys, trying this out now. I’ll report the outcome.

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Topic Info

Topic Tags