How to Build a Custom Webflow Navbar — Lesson 2

This tutorial guides you through the critical process of transforming a static desktop navigation bar into a fully responsive, mobile-ready system in Webflow. Building upon previous foundational work, the lesson shifts focus to the intricacies of mobile layouts, ensuring seamless functionality across tablets, phones, and varying viewports. You will move beyond simple resizing to address structural changes, such as repositioning menu buttons and ensuring critical calls-to-action remain visible and accessible on smaller screens.

A significant portion of the lesson is dedicated to mastering layout mechanics and viewport units to ensure a robust user interface. You will learn how to transition flexbox containers from horizontal to vertical orientations and, crucially, how to utilize Dynamic Viewport Height (dvh) to prevent common layout breakages caused by expanding and collapsing mobile browser address bars. The video demonstrates how to calculate precise menu heights using calc() functions, ensuring your navigation menu occupies the exact available screen space without unwanted overflow.

Finally, the tutorial emphasizes professional polish and user experience (UX). You will refine the interface by removing desktop-specific interactions like hover states, which are redundant and potentially confusing on touch devices. To achieve a high-end, native application feel, the guide concludes with the implementation of a custom CSS snippet that locks the background page scroll when the menu is active, keeping the user focused solely on navigation.

• Dynamic Viewport Units are Essential: Standard vh units often fail on mobile devices due to shifting browser UIs (like address bars); using dvh (Dynamic Viewport Height) ensures your menu always fits the visible screen area perfectly.
• Precise Height Calculation: To prevent overflow, you must calculate your mobile menu's height by subtracting the navbar's specific height from the total viewport height (e.g., calc(100dvh - 3.55rem)).
• Flexbox Adaptation for Mobile: Transforming the navigation requires switching flex containers from horizontal rows to vertical columns and adjusting alignment settings (such as align-items: stretch) to ensure links fill the full screen width.
• Responsive Button Grouping: For bottom-aligned links, utilize flex-wrap along with specific grow and shrink settings to allow buttons to stack or share space elegantly across both portrait and landscape orientations.
• Scroll Locking for UX: Enhancing the user experience involves adding a small custom CSS embed to set overflow: hidden on the body when the menu is open, effectively freezing the background page to prevent scrolling.

• 02:16 – Apply margin-left: auto to the menu button to force it to the right side of the flex container.
• 04:29 – Create the CC-M mobile combo class to toggle the contact link's visibility (display: none/flex) across different breakpoints.
• 13:49 – Set the nav menu height using a calculation (calc(100vh - 3.55rem)) to ensure it fills the screen minus the navbar height.
• 15:04 – Switch the flex direction of the main link group from horizontal to vertical for the mobile layout.
• 15:44 – Change the alignment setting to stretch to force all menu items to fill the full width of the container.
• 20:56 – Apply horizontal padding to the base button class (instead of the open state) to prevent the icon from jumping when toggled.
• 22:24 – Create a combo class (CC-2) for the bottom button group to revert their layout to horizontal.
• 28:52 – Wrap the nav menu contents in a new div (navbar_nav-menu-inner-wrapper) to properly maintain flex properties on mobile.
• 32:48 – Manually set the flex grow value to 1 on mobile buttons to ensure they share the available row space equally.
• 37:22 – Update the height calculation to use dvh (Dynamic Viewport Height) to prevent the menu from being cut off by mobile browser bars.
• 42:29 – Insert a custom CSS embed to set body { overflow: hidden; } when the menu is open to prevent background scrolling.

Building a Fully Responsive Webflow Navigation

1. Align Menu Button to the Right

Timestamp: 02:16

• How: Select the navbar menu-button element. In the Style panel, set the Margin Left to auto. You may also update the padding to 1rem for better touch sizing.
• Why: In a Flexbox container (the navbar), setting an auto margin on one side pushes the element as far as possible to the opposite side, securing the button to the right edge.

2. Manage "Contact Sales" Link Visibility

Timestamp: 03:27 – 04:29

• How: Duplicate your "Contact Sales" link and move the copy outside the Nav Menu, placing it directly in the Navbar container. Add a combo class like CC-M mobile. Set its Display to None on Desktop, but switch it to Flex on Tablet and below.
• Why: The standard desktop link is hidden inside the menu on mobile. Creating a specific instance outside the menu ensures key Call-to-Actions (CTAs) remain visible on tablets without opening the menu.

3. Style the Mobile CTA Link

Timestamp: 05:49 – 06:20

• How: Reduce the vertical padding to 1.25rem. Manually re-apply the underline style (Text Decoration: Underline, Color: Black, 2px thickness, Offset: 0.25rem).
• Why: The default desktop styles (like hover effects and large padding) are often too large for mobile headers. Tightening these values creates a more balanced mobile UI.

4. Fix Navbar Alignment Conflicts

Timestamp: 07:16 – 07:50

• How: Remove margin-left: auto from the Menu Button if you applied it earlier.
• Why: Since the "Contact Sales" link also uses margin-left: auto to push right, having both elements try to push right causes them to split the available space awkwardly. Removing it from the button lets them stack naturally against the right edge.

5. Calculate and Set Nav Menu Height

Timestamp: 13:49

• How: Select the Nav Menu. Set the Height to a calculation: calc(100vh - 3.55rem). (Note: Replace 3.55rem with your specific navbar height).
• Why: Setting height to 100vh causes the menu to overflow because it adds the navbar height to the viewport height. Subtracting the navbar height ensures the menu fits perfectly in the remaining space.

6. Switch to Vertical Mobile Layout

Timestamp: 15:04 – 15:44

• How: Select the navbar link group (the container holding your links). Change Flex Direction from Horizontal to Vertical. Set Align Items to Stretch.
• Why: Mobile menus function best as vertical lists. Using Stretch ensures that every link and button spans the full width of the device, increasing the tappable area.

7. Adjust Dropdowns and Padding

Timestamp: 16:42 – 18:09

• How: Set Dropdown Toggles to Flex with Justify: Space Between. Add 1.25rem horizontal padding to all links and toggles. Remove the Gap from the main link group container.
• Why: This pushes dropdown arrows to the far right and prevents text from sticking to the screen edges, creating a cleaner, "app-like" appearance.

8. Align Menu Button and Brand

Timestamp: 19:52 – 21:09

• How: Reset the Navbar Main Container horizontal padding to 1.25rem. Select the Menu Button (in its default state, not Open state) and set its horizontal padding to 1.25rem as well.
• Why: Standardizing padding across the container, button, and logo ensures that all elements align perfectly vertically on the left and right edges of the screen.

9. Create a Bottom Button Group

Timestamp: 22:24

• How: Select the second link group (utility links like Login). Add a combo class CC-2. Set Flex Direction to Horizontal and Align to Center.
• Why: Unlike the main navigation links, utility links often look better kept in a horizontal row at the bottom of the menu to save vertical space.

10. Style Links as Mobile Buttons

Timestamp: 23:53 – 25:12

• How: Add a combo class CC-button-mobile to these links. Add padding, a 4px border radius, and use an Inner Box Shadow to simulate a border (instead of the Border property).
• Why: This transforms plain text links into distinct buttons, making them easier to identify and tap on touch screens.

11. Fix Flex Behavior with an Inner Wrapper

Timestamp: 28:01 – 28:52

• How: Wrap all content inside the Nav Menu into a new Div called navbar_nav-menu-inner-wrapper. Move the Flex properties (Direction: Column, Display: Flex) from the Nav Menu to this new wrapper.
• Why: Webflow forces the Nav Menu element to display: block when open, which breaks Flexbox positioning (like pushing content to the bottom). Using an inner wrapper preserves your Flex layouts.

12. Ensure Buttons Wrap and Size Correctly

Timestamp: 31:23 – 33:10

• How: On the button group, set Wrap to Wrap. Select the buttons and set Flex Grow to 1.
• Why: This ensures that if the screen is too narrow (like on small phones), the buttons will automatically drop to a new line and expand to fill the available width evenly.

13. Implement Dynamic Viewport Height (DVH)

Timestamp: 37:22

• How: Update the Nav Menu height calculation to use dvh instead of vh. Example: calc(100dvh - 3.55rem).
• Why: Standard vh units ignore mobile browser address bars, causing content to be cut off. dvh (Dynamic Viewport Height) automatically adjusts when browser toolbars expand or collapse.

14. Remove Mobile Hover Effects

Timestamp: 39:09 – 41:00

• How: Select your menu elements (Links, Brand, CTA) in the Hover state and reset text colors, shadows, and backgrounds to match the None state.
• Why: Hover states do not exist on touch devices and can cause buttons to get "stuck" in a hover state after being tapped, confusing the user.

15. Add Scroll Locking

Timestamp: 42:24 – 42:48

• How: Add an Embed element inside the Navbar. Paste custom CSS that targets the body when the menu is open:
• (Note: This is usually triggered by a specific class Webflow adds to the body or nav, or via a small JS snippet provided in the source).
• Why: This "freezes" the background page, preventing users from accidentally scrolling the main content while trying to navigate the menu.

Standard vh units often fail on mobile because they do not account for dynamic browser toolbars, causing content to be hidden. To fix this, use Dynamic Viewport Height (dvh) in your height calculation—such as calc(100dvh - [navbar_height])—to ensure the menu fits the visible screen exactly.

You must add a custom CSS embed that sets the body element's style to overflow: hidden when the menu is active. This effectively "freezes" the main page content, preventing users from scrolling away from the navigation overlay while it is open.

If your navbar uses a Flexbox layout, simply select the menu button element and apply margin-left: auto. This CSS property forces the button to push itself away from left-aligned elements (like your logo), positioning it securely against the right edge of the container.

Select your navigation link container and switch the Flex layout direction from "Row" to "Column" for mobile breakpoints. To ensure the links span the full width of the menu rather than shrinking to their text size, change the alignment setting (align-items) to stretch.