Nav Bar Bottom Postion (Twenty Eleven)

  • Good morning, Forums!

    I’m working on a site where I want the access nav bar to appear that the bottom of the page. All is well with that. I have it positioned at the bottom as I would like, and when the browser is re-sized it floats along the bottom just as I expect it to.

    The “trouble” is that I’m using a static image on a static page. And I think what I would like to do is have the nav bar positioned to the bottom of that image at the browsers largest width and height. I’ve added some css to re-size the nav bar (by %) so that I don’t see the page background color underneath the image I’m using. But, from browser to browser (firefox/chrome/safari), I’m losing more and more of the bottom of my jpg doing it this way. And when I consider a visitor’s unpredictable number of toolbars in their browsers, who knows how much of the bottom of my jpg is being covered?

    Perhaps I’ve conceived the execution of my bottom nav layout not to my best advantage? I do not want any page color appearing below the bottom of my jpg (between nav bar and image). I want the nav bar at the bottom on this page. Is there a better way for me to visually “connect” the top of my bottom nav bar to the bottom of my jpg image?

    Here’s a link!
    https://maryjosmith.com

    Any ideas appreciated! Thanks, Forum Folk!
    tdmac

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

  • Hi there,

    If you will be using the same image or different images with the same image height, you can just hard code the top position of the menu in your theme’s style.css file so as to position the menu right after the image.
    If you will be using images of different dimensions (mainly, the height), you would have to use JS code to position your menu. If that is the case, LMK and I’ll write a quick script for you.

    Cheers!

    Thread Starter tdmac

    (@tdmac)

    Hi Marventus!

    Thanks for the reply. The content will have other dimensions most likely, so I don’t think hard coding the position of the nav bar from the top will work across all pages of the site.

    I’m very, very, VERY new to JS, so I would totally appreciate your help with that!

    Hi tdmac,

    I made a JSFiddle for you so you can see my idea in action.
    LMK if you need help implementing it in your site.

    Cheers!

    Hi Tdmac,
    You never got back to me on this.
    Do you need additional help?

    Thread Starter tdmac

    (@tdmac)

    Hi Mareventus!

    Thanks so much for getting back to me on this. I had to set this problem aside for a minute while I’ve encountered some shopping cart issues on a whole other site. That site has required my attention, so I apologize for not following up with you! Can you give me a couple more days to take a look at this and get back to you?

    Yeah, no pb. I always perform checks after a couple of days to see if threads were resolved or not.
    Just drop me a line here when you are ready to tackle this issue.
    Cheers!

    Thread Starter tdmac

    (@tdmac)

    Hey Marventus!

    I’ve had a second to see what you posted over there at JSFiddle (cool, btw). Question about this solution…would it mean that my page color would appear below my navigation bar, if the nav bar is, instead positioned with JS to attach to the bottom of my image? I guess in this scenario, I would like that nav bar to resize it’s height, (keeping nav buttons and ul’s at the top of the nav box they’re positioned in), so that the page color never appears below the nav area. Does that make sense?

    Thanks!
    tdmac

    I see. If I’m understanding you correctly, you don’t want any part of the #main or #content div to be seen under the footer, correct?
    I’ll update the JSFiddle accordingly.

    Here you go!

    Hi!
    I never heard back from you about this issue. Were you able to figure it out?

    Thread Starter tdmac

    (@tdmac)

    Oh cool! Let me check it out. The forums didn’t send me an email! t.

    Hey,
    Did you ever make this work? If not, this version should work better:
    https://jsfiddle.net/Marventus/ev9Xg/7/
    You would have to mod it to fit your theme.
    Cheers!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Nav Bar Bottom Postion (Twenty Eleven)’ is closed to new replies.