why does my menu overlay the page conrent

Question

higgsy.comon this page is my new menu but when opened it overlays the content.  Do I just move all the content to the right or is there a better way to fix it? many thanks in advance, David

Ben M · Accepted Answer

In short, your menu doesn’t have a z-index so it’s just showing behind your content. Adding a z-index would fix that. And your content has a float which is why it overlaps the red outline of your header. If you remove the float it ends up within that frame because the float is not really necessary here.

Although I will say your site is not mobile friendly and despite these two minor adjustments, your page could use a refresh in its code/layout to be more modern and responsive for your visitors so it renders properly on all devices. Have you considered a bigger update to your layout?

curious_navigatordb3a · Answer

One more thing worth knowing for next time: z-index only takes effect on positioned elements, so make sure the menu itself has a position value such as relative, absolute, fixed, or sticky. Without that, even a high z-index will not change the stacking order. If the menu is fixed or sticky, it also comes out of the normal document flow, so adding top padding to your content wrapper roughly equal to the menu's height will stop the very top of the page sitting underneath the menu. And I agree with Ben about responsiveness: resizing the page in the browser's device toolbar while you work will save a lot of surprises later on.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.