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
- Use a Flex container with three Divs (Left Menu, Center Logo, Right Menu) to structure the navbar.
- Add and style Text Links in the side Divs, removing underlines and blue color across all states.
- Place a linked logo in the center Div and ensure all menu items are properly linked to internal or external pages.
- Adjust layout for responsive design using visibility settings or a mobile menu.
To create a custom navigation bar in Webflow with a centered logo and menus on both sides, follow these steps and style settings to ensure menu items are properly linked, free of underlines and blue color.
1. Structure the Navbar Layout
- Drag a Section into your canvas and give it a class like
Nav Section. - Inside the Section, add a Container or a Div Block and name it
Navbar Container. - Inside this container, add three Div Blocks:
- Left Menu (
Div Left) - Logo Wrapper (
Div Center) - Right Menu (
Div Right)
2. Style the Navbar Layout
- Apply Flexbox to
Navbar Container: - Display: Flex
- Direction: Horizontal (Row)
- Justify: Space Between
- Align: Center
- For each Div (Left, Center, Right):
- You may set flex: none or give fixed/auto widths depending on your spacing needs.
3. Add and Style Menu Links
- In both
Div LeftandDiv Right, add Link Blocks or Text Links for each menu item. - Use Text Link elements if you want inline text links. Use Link Blocks if you're wrapping other elements inside.
- Set Text Link styles:
- Text Color: Choose your desired color (not default blue).
- Text Decoration: None (removes underline).
- Font, padding, hover effect: Set according to your design.
- To prevent blue and underlined default styles:
- Select the link → On the Style panel, go to States > All States > Visited / Hover / Pressed and ensure the styles match your default state (no underline, custom color).
4. Add and Style the Logo
- Inside
Div Center, add an Image or Text Link for your logo. - Set a class and size constraints (e.g., max width or height).
- If the logo is a link back to home, wrap it in a Link Block pointing to the homepage.
5. Link Menu Items to Pages
- Click a Link → In the Settings panel (gear icon), choose:
- For internal pages: Select from the “Page” dropdown under Link Settings.
- For external URLs: Use the URL field.
- Repeat for each menu item.
6. Ensure Responsiveness
- On smaller breakpoints:
- Use Hide/Show controls to adjust layout.
- Consider rebuilding or converting to a mobile menu if needed.
Summary
To build a custom navbar in Webflow with a centered logo and menu items on both sides, use Flex layout with three Div Blocks, add and link Text Links without default styles, and ensure each link is styled to remove underline and the blue color across all states.