On a phone the bottom of the screen is where the thumb already is, which is why apps put navigation there.
Setting the position to fixed and bottom pins the bar there while the page scrolls behind it.
For every Mobile Menu setting in one place, see the Mobile Menu block guide.
Before You Start
- Edition: Pro — the Mobile Menu block is part of Nexter Blocks Pro.
- Block to enable: Mobile Menu, switched on under Nexter > Blocks in your WordPress dashboard.
- Your menu items decided: four or five is the usual limit before a phone bar gets crowded.
Steps
- Add the Mobile Menu block to your page or template and click Design from Scratch.
- In the Mobile Menu panel, add your items — each one takes a label, an icon or image, and a link.
- Set Open Mobile Menu(px) to the width below which the menu should appear.
- Set Position to the fixed option and choose Bottom.
- Check the bar against your page — a fixed bar covers the bottom of the screen permanently.
- Publish and scroll the page on a phone to confirm the bar stays put.
Open Mobile Menu(px) is a maximum width, not a minimum — the menu appears on screens narrower than the number and stays hidden above it.
How It Behaves
- With fixed and bottom the bar has `position: fixed` and sits flush with the bottom of the screen — measured at exactly the viewport height on a 844 pixel tall phone screen.
- The page scrolls behind it, so the bar is always reachable.
- The same setting offers Top, which pins the bar to the top instead.
- Choosing absolute instead leaves the bar in the page, scrolling away with the content.
Limitations
- Pro only.
- A fixed bottom bar permanently covers part of the screen. Add bottom padding to your page so the last of your content is not hidden behind it.
- It can collide with a phone browser’s own bottom toolbar, so test on a real device.
- Two fixed bars, such as this and a cookie notice, quickly eat the screen.
Troubleshooting
The bar scrolls away with the page
Position is set to absolute. Switch it to the fixed option and choose Bottom.
The last part of my content is hidden behind the bar
Add bottom padding to the page or template roughly equal to the bar’s height.
The bar sits at the top instead
The fixed position is set to Top. Change it to Bottom.
