Webflow Navbar: Hover Dropdowns, Hamburger, and Menu Styling

Open the Add Elements panel (A), scroll to the Advanced section, and drag the Navbar element onto the canvas at the top of your page — typically above the hero section. Webflow automatically creates the full navbar structure. Open the Navigator (Z) to see: Navbar (wrapper) → Brand (logo link) + Nav Menu (link container) + Menu Button (hamburger). Inside the Nav Menu you will find pre-added Nav Link elements. The Menu Button is automatically set to Display: None on Desktop (Style Panel → Layout → Display) and becomes visible on Tablet and below. Give the Navbar element a class name like 'navbar' to begin styling.

Click the Brand element inside the Navbar. In Element Settings (D) → Link type, leave it as 'Page' and select your homepage so the logo links to your home page. Inside the Brand element, add an Image element (Add Elements A → Basic → Image) and assign your logo in Element Settings (D) → Source. Set a fixed width for the logo (e.g., Style Panel → Size → Width: 120px, Height: Auto). For navigation links, click each Nav Link in the Nav Menu, open Element Settings (D), and set the link type to 'Page' or 'URL' for each destination. Double-click the Nav Link text on the canvas to rename it (e.g., 'Home', 'About', 'Services', 'Contact').

To add a dropdown sub-menu under a nav item, first delete or keep the existing Nav Link you want to replace with a dropdown. Open Add Elements (A) → Advanced → Dropdown and drag it inside the Nav Menu (confirm in Navigator Z). The Dropdown element creates a Dropdown Toggle (the visible link with a triangle arrow) and a Dropdown List (the hidden sub-menu). Inside the Dropdown List, you will find Dropdown Links — click each to set destinations in Element Settings (D). Rename the Dropdown Toggle text by double-clicking it on the canvas (e.g., 'Services'). Add more Dropdown Links by duplicating existing ones (Cmd+D) or dragging new ones from Add Elements.

By default, Webflow dropdowns open on click. To switch to hover open, select the Dropdown element → Element Settings (D) → check 'Open menu on hover'. This changes the trigger from click to mouseenter/mouseleave. Hover-triggered dropdowns are better for desktop navigation; click-triggered are better for mobile-inclusive designs since mobile devices have no hover state. Consider keeping click for all dropdowns and relying on the built-in toggle behavior, which Webflow handles automatically. You can also set the animation in the Interactions panel (H) → Component triggers → 'Dropdown Opens' and 'Dropdown Closes' to customize the open/close animation beyond the default instant appearance.

Switch to the Tablet breakpoint (Breakpoint Bar, top of Designer — select the Tablet icon). On tablet and below, the Nav Menu collapses and the Menu Button (hamburger) becomes visible. Click the Menu Button — it has three built-in styles: Default (horizontal lines), Open (X icon), and a built-in transition animation between them that Webflow handles without Interactions. Style the hamburger by selecting it and modifying Style Panel → Effects → Box Shadows, Borders → Border Radius, or Backgrounds → Color. For the mobile Nav Menu itself (the panel that slides down when the hamburger is clicked), select the Nav Menu element → Style Panel and set: Background color, padding, font size, and text alignment for mobile-specific styling. The mobile menu behavior can be changed in the Navbar Element Settings (D) → Menu type: Dropdown (default, slides down from nav), Over Right (slides in from right), or Over Left.

Webflow automatically applies a 'Current' state class to the Nav Link that corresponds to the current page the visitor is on. To style the active link, select any Nav Link in the navbar. In the Style Panel Selector field at the top, click the States dropdown and select 'Current'. Now apply your active styles: change Background color, Font color, add a Bottom Border, or change Font Weight. These styles automatically apply to whichever page's Nav Link matches the current URL. For Dropdown Links, the Current state applies to the specific dropdown link matching the current page — the parent Dropdown Toggle does not automatically get styled as current (a known Webflow limitation).

Dropdowns that appear behind hero images, sliders, or sticky sections are a common Webflow navbar issue. This is a z-index stacking context problem. Select the Navbar element → Style Panel → Position → set Position to Sticky (Top: 0) or Relative. Set Z-index to 999 (or 1000 for sticky navbars). Also check the Dropdown List element itself — it may need its own Z-index if it appears inside a Relative-positioned parent. Select the Dropdown List → Style Panel → Position → Relative → Z-index: 1000. For sticky navbars, also check that the hero section or slider below does not have a higher Z-index that would place it visually above the dropdown.