Hi there all,
I really need help with this. Posted it on Stack Overflow (which is where you can find all the code associated with my problem) but no one seems to be able to help.
http://stackoverflow.com/questions/32102256/divs-overlapping-push-one-up-and-the-other-down
Essentially, I have a “hamburger” mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.
Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I’d rather it push the header up and the div below it down.
Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling.
I had some advice that perhaps adding “position: relative” to #header and “position: absolute” to #navigation (plus using “top” to adjust its location) would solve the problem, but this doesn’t work too well either as it doesn’t push the divs below it down to account for the space the navigation takes up!
Any help would be appreciated.
