0

I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?

Beverly Lodge
  • 88
  • 9
  • Can you please be more clear about which logo you're talking about (there are two: the re.pub.lic.pi text on the left in the navigation bar, and the white round transparent logo on the right) – Will Lanni May 29 '15 at 21:47

1 Answers1

0

The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)

This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.

Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.

Will Lanni
  • 923
  • 12
  • 25
  • That did it! I knew I was close, but couldn't figure out where to put it. Thanks so much!!! High Five to you from my mind! – Beverly Lodge May 29 '15 at 22:10
  • @Beverly Lodge your menu is not working now. ie, not sliding down when you click the humberger icon – Tasos May 29 '15 at 22:16
  • Looks like it's working to me, @TasosAnastasiou. I click the hamburger, and it pops open. – Will Lanni May 29 '15 at 22:24
  • @Will Lann, Its probably not related to the fix, however on chrome it works and it doesnt work. ie when it works then try to scroll down and you get a weird scroll effect on the page, when the window is resised and the menu is down you loose the animation of the menu. theres an issue with the bottom image slide i think http://s30.postimg.org/hmul43br5/Capture.png – Tasos May 29 '15 at 22:33
  • @TasosAnastasiou ah—the bottom slider definitely has an issue, as it's not in a parent element that has an overflow-hidden, and it resizes the rest of the page, but that wasn't part of the OP. I'm not able to break the menu in Chrome or Firefox on resize otherwise (if I ignore that bottom issue). But, I do see what you mean. – Will Lanni May 29 '15 at 23:48