Sidebar overlaps menu button

Anvil Q&A
1

I apologize if this is already answered somewhere. I expect that it is but haven’t found an answer.

Using the material template I add a columnpanel to the sidebar. This works great to add the ‘hamburger’ menu button.

when viewed on a mobile device, the sidepanel slides out and covers the button. It’s possible to collapse it again by clicking on the panel behind, but it’s not intuitive.

How can I correct this?

menu1
menu1.png462×715 81.9 KB

menu2
menu2.png448×758 19.6 KB

1 Like
2

Hi @shopinthewoods

If you try adding a Link or a Button to your sidebar, clicking either of those from a mobile device will auto-collapse the sidebar for you. This is built into the JavaScript that comes as part of the Material Design theme - it handles expanding and collapsing the sidebar for you.

The expanding sidebar covers the ‘hamburger’ menu button on mobile devices as the nav bar is designed as a modal overlay on mobile devices, as per the requirements of Google’s Material Design theme.

If you do want to adjust the display of the sidebar on mobile to appear underneath the navbar, you can do this by altering the theme’s CSS. Navigate to the ‘Assets’ section, under ‘THEME’ in the App browser, then choose ‘theme.css’ from the dropdown at the top. Around line 197 you’ll find the CSS that styles the navbar on mobile devices.

The sidebar is in a fixed position, so we can move it below the navbar by setting the top offset equal to the min-height of the navbar (around line 203 in theme.css):

@media(max-width:998px) {
    /* ... */
    html:not(.designer) .nav-holder .left-nav {
        position: fixed;
        top: 56px; /* Change to 56px (the min-height of the navbar) to move the sidebar down */
        bottom: 0;
    }
    /* ... */
}

Bear in mind that 56px is the min-height of the navbar, so if you add components to your navbar that increase its height over 56px, you’ll need to adjust this CSS to make the sidebar appear neatly underneath the navbar.

Here’s a clone link to show the sidebar appearing underneath the navbar

https://anvil.works/build#clone:4HRX6F4JP5DKF6RT=NCCBB7RJHEAJ2NZJKKEJ2OCJ

3 Likes