How can I create a Left Navbar Sliding animation in Webflow that pushes the content to the right in Mobile view?
TL;DR
- Create a fixed-position left navbar off-canvas using transform X = -100% and wrap page content in a relative-positioned div.
- Add a menu button with a tap interaction that animates the navbar sliding in (X: -100% to 0%) and shifts the page content to the right (e.g., X: 250px), then reverses on second click.
- Set visibility to mobile-only for the navbar and button for responsive behavior.
To create a Left Navbar Slide-in animation that pushes content to the right in Webflow (commonly used for mobile menus), follow the steps below.
1. Prepare the Structure
- Create a div block for your NavBar (e.g., name it
Mobile Nav). - Set the position to Fixed, top-left, and height/width to 100% height and desired width (e.g., 250px).
- Set z-index higher than the rest of the content.
- Add your menu items inside this
Mobile Nav.
2. Set Initial State for the Nav Menu
- Select the
Mobile Navand move it off-canvas by setting its initial transform X = -100% (under the Style panel). - This ensures it’s hidden by default and ready to slide in.
3. Create Content Wrapper
- Wrap all your page content (excluding nav) in a Div Block, name it something like
Page Wrapper. - Set position: relative and ensure it covers the visible content area.
4. Add a Menu Button
- Add a Menu Button (e.g., Hamburger icon) that will trigger the animation.
- Place it in a fixed or sticky position at the top left (or wherever suitable in mobile view).
5. Create the Slide-in Interaction
- Go to the Interactions panel and select your Menu Button.
- Create a Mouse Click (Tap) trigger and set up two actions: First Click and Second Click.
First Click (Open Menu)
- Animate
Mobile Nav: Move X from -100% to 0% (duration ~0.3s). - Animate
Page Wrapper: Move X from 0% to 250px (or match nav width). - Optional: Dim background or disable scrolling.
Second Click (Close Menu)
- Animate
Mobile Nav: Move X from 0% to -100% to hide it. - Animate
Page Wrapper: Move X back from 250px to 0%.
6. Make It Mobile-Only
- In the Navigator, ensure the
Mobile Navand Menu Button are visible only on tablet and smaller (set Display: None on Desktop). - Adjust other styles as needed for responsiveness.
Summary
To build a Left Navbar Slide-in on mobile that pushes content to the right, use a combination of fixed-position nav, content wrapper moves, and Webflow click interactions. Animate both the menu and the main content for a smooth effect.