I’ve been fighting back and forth with this issue for a while. I have a heading over my main image that I positioned absolute so that I could align it correctly on top of the image, but when the site is viewed on mobile and the navbar is toggled, the heading remains where it is and covers up all the navigation menu items.
The code can be found here
Can anybody please help me with this? Is there a media query I can create so that the heading moves down with the image only when the navbar is toggled?
You could add to the javascript so it changes the CSS for that section when it’s toggled. Or use flex box on that section to position it rather than absolute.
1 Like
Another option is to move the class=“headText” div inside the id=“header” div, because the id=“header” div is position relative the absolutely positioned headText will be pushed down along with it.
1 Like
You are a lifesaver haha this was exactly what I needed to do. I have no idea why I blanked on putting the text div inside the header div. I appreciate your help!
No problem, happy to help.
It happens to the best of us. It is a lot easier for me to “fix” other peoples code than my own, you get so involved it blinds you from seeing the solutions staring you right in the face.
Happy coding.
1 Like