How can I change the color of the divider lines and page selector in my navbar in Webflow?

Published on
September 22, 2023

To change the color of the divider lines and page selector in your navbar in Webflow, you can follow these steps:

  1. Open your project in the Webflow Designer and navigate to the page where your navbar is located.
  2. Select the navbar element by clicking on it in the Designer or in the Navigator panel.
  3. In the right-hand panel, you will see the Styling options for the navbar. Expand the "Navbar" section if it is collapsed.
  4. Scroll down to the "Divider Lines" section. By default, Webflow applies a border-bottom style to the navbar links. You can change the color of the divider lines by modifying the "border-color" property.
  5. To change the color of the page selector, you will need to select the particular element that represents the active page in your navbar. This could be a link, a button, or any other element that visually represents the active page.
  6. With the active page element selected, navigate to the "Styles" panel on the right and scroll down to the "Background" section. Here, you can change the background color to the desired color for the active page selector.

Remember to publish your changes for them to take effect on your live website. Following these steps should allow you to easily change the color of the divider lines and page selector in your navbar in Webflow.

Additional questions:

  1. How can I customize the appearance of my navbar in Webflow?
  2. Can I add custom fonts to my Webflow project?
  3. How do I create a responsive layout in Webflow?