Keeping Nav Bar flush with image at header

[sethbahookey]

Hey everyone!

So I'm getting close to finallllyyyy finishing this site 🙂 Studiopress has this neat tool that allows you to look at your site in different screen sizes and I'm a little stuck as to figuring out "best practice" for a styling issue.

If you pull up the site thecompressioncloset.com, go ahead and make the width smaller. You'll notice that the nav bar just moves down and away from the logo/main image at top.

How would I make it so it is consistently flush with that top image? Would I use some JS? or is there some kind of CSS I could use? or do I literally have to create a bazillion media queries changing the margin-top each time (that's what I did to make it flush btw.. margin-top{ -8%;} <- probably not best practice to begin with, but I wasn't sure what to do.

Thanks for the advice

http://thecompressioncloset.com

[SavvyJackie]

Hi - I am not seeing your issue on your site. Has it been resolved?

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[sethbahookey]

Hey Savvy,

Thanks for taking a look at my post! I ended up redoing the design slightly on the front page to keep that pesky brown bar flush with the picture 🙂

I'll mark it as resolved!

Regards,
Seth

[Author]

Posts