How do I make the buttons in the Webflow side menu extend all the way while maintaining the blue line on the far right border when hovered and selected?
TL;DR
- Set buttons to 100% width and use flexbox with vertical direction and stretch alignment in the sidebar.
- Add a transparent 2px right border by default, which changes to blue on hover/selected states to avoid layout shift.
To make side menu buttons extend the full width while keeping a blue line on the far right during hover and selected states, you need to adjust layout and interaction styles carefully.
1. Set the Button to Full Width
- Select the button element in your side menu.
- In the Style panel, set Width to 100%.
- Ensure the button's parent container (e.g., a sidebar/link block container) has a set width so the button can stretch to fill it.
2. Align the Blue Line on the Right Edge
- Add a right border to the button (blue line) for hover and selected states:
- Go to the States dropdown (in the top right of the Style panel).
- Choose Hover, and add a 2px Border to the right side.
- Set the color to your desired shade of blue.
- Repeat for the Current state (Webflow auto-detects this when you assign a page link).
- Make sure other borders (top, left, bottom) are set to none or 0 px if you only want the right border.
3. Remove Extra Padding or Margin
- Inspect the button for any left/right padding or margin that may prevent it from touching the edge.
- Set left and right padding to 0px, or use the space intentionally depending on design.
- Also check the sidebar's inner padding — ensure the button's container allows the border to align flush with the sidebar edge.
4. Use Flexbox for Consistency
- Set the parent sidebar container to Flex > Vertical direction.
- Align children (buttons) using Align Stretch so they take up the full width automatically.
5. Add a Transparent Right Border for Consistent Layout
- To prevent layout shift during hover/select, add a transparent 2px right border to the default state.
- So when the border turns blue on hover/selected, the button won't shift or grow.
Summary
Set the menu button to 100% width, apply a right border in hover/selected states, and ensure the layout uses flexbox with stretch alignment. Use a transparent right border in the default state to prevent movement.