Can I change the tablet breakpoint in Webflow from 990px to 1300px width for a vertical menu on my website?
TL;DR
- Add a custom @media (max-width: 1300px) rule in Project Settings > Custom Code to style your vertical menu.
- For page-specific changes, use the Embed component in Webflow with the same CSS.
- Modify styles within the @media query to adjust navigation as needed.
Webflow does not allow changing the tablet breakpoint from 990px to 1300px, but you can achieve a similar result using custom media queries. Here’s how:
1. Add Custom CSS in Site Settings
- Go to Project Settings > Custom Code.
- In the Head Code section, add the following:
```css``` - Click Save Changes and Publish your site.
2. Use a Custom Embed Element for Page-Specific Changes
- If you only want the styles on a specific page, use the Embed component inside Webflow.
- Add the same CSS
<style>code inside the Embed block anywhere on the desired page.
3. Adjust Styles for Your Vertical Menu
- In the @media rule above, modify your navigation styles, such as:
```css
nav {
flex-direction: column;
}
``` - Customize this to match your desired look and behavior.
Summary
Webflow does not allow modifying breakpoints, but you can use custom media queries to create a tablet-style layout at 1300px. Add CSS in Project Settings or use an Embed component to target styles specifically.