Layout in Next.js obscures page content

Question

I'm trying to use bottom navigation in Material-ui (https://mui.com/material-ui/react-bottom-navigation/) as a layout in my Next.js app.

However, the navigation covers the bottom of the page. I tried changing margins and padding but it didn't work.

The bottom navigation I use is exactly the same as Material-ui.

Looks like this without layout.

With layout, it masks the content -

Thank you so much

Answer 1

Without providing any code snippets, it's hard to tell how to use it, but it looks like the MaterialUI navigation is designed to appear on top of the page content.

You need to add an empty div above the navigation in your layout that is the same height as the navigation to push it down that amount.