How can I create a custom navigation bar in Webflow with centered menus and logo, and properly link the menu items to pages without any underlines or blue color?
TL;DR
- Create a flex or grid layout with three divs (left menu, centered logo, right menu) inside a container.
- Add and link navigation items in left/right divs, style links to remove underlines/blue color, and make adjustments for responsiveness.
To create a custom navigation bar in Webflow with a centered logo and menus, as well as style links without underlines or blue color, follow these steps:
1. Build the Navbar Structure
- Drag a Section element into the top of your page.
- Inside the Section, add a Container (or create a div block if you want more control).
- Inside the Container, add three Div Blocks:
- Left Menu (for left-aligned nav links).
- Logo (centered logo image).
- Right Menu (for right-aligned nav links).
- Set the Container or parent layout to Flex → Horizontal (Row) and set Justify: Space Between, Align: Center.
2. Center the Logo Visually
- Set fixed widths to Left Menu and Right Menu divs (e.g. 33% each), and center the logo div with auto margins or fixed size.
- Alternatively, use Grid layout with three columns (Left - Center - Right) and place logo in the center column.
3. Add Navigation Links
- Inside the Left and Right Menu divs, add Link Blocks or Text Links for navigation items.
- Give each nav item a class (e.g.,
nav-link) for styling.
4. Link to Pages Properly
- Select each Link or Text Link, then in the settings panel (right sidebar), under Link Settings:
- Choose Page and select the page you want to link to.
- This ties the nav item to your internal Webflow pages.
5. Remove Underlines and Default Link Colors
- Select the link class (e.g.
nav-link) and go to the Style panel. - Under Typography:
- Remove underline by setting Text Decoration → None.
- Change the text color from default blue to your preferred color (e.g. black, white, etc.).
- Change the hover state as well to make sure hover color/underline is styled the same.
- Click the States dropdown (top of Style panel), select Hover, and adjust styles accordingly.
6. Make It Responsive
- Adjust alignment and wrapping for Tablet and Mobile breakpoints.
- Optionally add a dropdown or mobile menu using a Hamburger icon and Webflow’s built-in “Navbar” component if you prefer.
Summary
To create a centered custom navigation bar in Webflow: use a 3-column flex or grid layout, place navigation links on the sides and logo in the center, use page linking in each menu item, and override default link styles to remove underlines and blue color. Styling should be consistent across all states.