I’m having a problem in my CSS layout. I have a responsive site, using the “mobile first” method so I have a style.css file for small screen and an enhanced.css file for larger screens. I’m also using a responsive dropdown nav from responsive-nav.com.
My problem is this. In a small screen, I need my drop down nav to push down my intro section (green image area) when it expands. I don’t want the nav to overlap the intro. This is working, but it’s not pushing the intro down enough. This is because I have a negative margin on my intro in order to get it in the position that I want. Because of this, the nav - when opened - can’t push down the intro enough because the intro is higher than it should due to the negative margin.
I realize there are larger issues here and I probably shouldn’t be using a negative margin at all. The basic structure of my HTML is probably not correct but I’m not sure how to fix it. Wow does it ever get confusing when there are so many pieces working together!
Any tips on how to fix this?
