Back to tutorials
User / Level Icon
Gear Time Icon
Time Icon

Basic Custom Navbar - Derek Siu Headshot smiling

Taught by:

Derek Siu

In this video tutorial, I’ll guide you step-by-step through the process of building (from scratch) a basic custom navbar in Webflow. By following along and understanding the premise, you'll be easily able to create a professional-looking navbar that perfectly complements your site's design.

Resources used:
Copy Code


Are you tired of using the same old boring navigation bars on your website? A custom navbar can add a touch of personality and style to your website and help improve the user experience. In this tutorial, I'll walk you through the process of building a custom navbar in Webflow.

Why Use Webflow?

Webflow is a powerful website building tool that allows you to create custom designs without the need for coding knowledge. It's perfect for beginners and experts alike, and offers a range of features and tools to help you create a professional-looking website.

Getting Started

Before you start building your custom navbar, you'll need to create a new project in Webflow. Once you've done that, you can start designing your navbar. First, choose the background color and font style you want to use. You can also add a logo to your navbar if you have one.

Adding Links

Now it's time to add links to your navbar. These links will direct users to different pages on your website. To do this, simply select the "link" element in the Webflow menu and drag it onto your navbar. Then, choose the page you want the link to go to.

Styling Your Navbar

To make your custom navbar stand out, you'll need to style it to fit with the rest of your website's design. You can add animations, change the color and font, and adjust the size and position of your navbar elements.

Finalizing Your Custom Navbar

Once you're happy with your custom navbar, it's time to finalize it. Make sure all the links are working correctly and that the design looks good on all screen sizes. You can also add dropdown menus to your navbar to make it more user-friendly.


Building a custom navbar in Webflow is a simple and easy process, and can add a lot of value to your website. By following the steps outlined in this guide, you can create a professional-looking navbar that complements your website's design and improves the user experience. So why wait? Get started on building your custom navbar today!

How Did You Find This Tutorial?
Ready to implement this tutorial?
Get started with Webflow Today!
Webflow Icon Logo
Signup For A Free Webflow Account
Stay updated with my Newsletter!
Have Any Further Questions?
Contact Me
Basic Linkedin Icon
Basic Pinterest Icon
Basiic Maill iicon