Font Size Jumps Suddenly Near 1435px Inside Navbar (Nav_Link)


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello,

I’m encountering a strange visual issue with a text element inside the Webflow Navbar component, and I’m hoping someone can help me pinpoint the conflict.

I have a navbar_link element, inside the navbar, and its font size is set to a fixed size of 0.9rem.
All parent elements’ font sizes are consistently set to 1.1rem.
When the browser window is resized down from full screen, the text size suddenly appears to get significantly larger, exactly around the 1435px viewport width.This jump occurs well before the standard Tablet breakpoint of 991px.
When the element is copied outside of the Navbar component, the size is perfectly stable and does not jump at 1435px.

Thank you for your help!

@Hyerin

This is caused by Webflow Navbar’s internal layout switch that happens around 1440px, before the Tablet breakpoint. The Navbar applies scaling/transforms at that width, which visually changes rem-based font sizes. The font-size value itself does not change, but the rendered size does. This only affects elements inside the Navbar component.

Override font-size at the problem width (BEST)

@media screen and (max-width: 1440px) {
.navbar_link {
font-size: 0.9rem !important;
}
}

This usually comes from the Navbar’s built-in responsive styles or a hidden media query kicking in before the tablet breakpoint. Check the navbar link for inherited styles, min/max font-size, or custom CSS tied to large screens. Also inspect if the navbar is using vw-based sizing or a transform that affects scaling around that width.