Is there a way to make the prebuilt navbar span 100% on wider browsers in Webflow so that the logo is on the far left and the links are on the far right without affecting the menu's functionality?

Published on
September 22, 2023

Yes, there is a way to make the prebuilt navbar span 100% on wider browsers in Webflow while keeping the logo on the far left and the links on the far right without affecting the menu's functionality. Here's how you can achieve this:

  1. Select the prebuilt navbar element in Webflow.
  2. In the Style panel on the right-hand side, navigate to the Flex settings.
  3. Change the direction to "Row" and the Justify to "Space between".
  • This will automatically align the logo to the left and the links to the right, ensuring they span 100% of the available space.
  1. Now, you need to make sure the logo does not affect the size of the navbar. To do this, select the logo element within the navbar.
  2. In the Style panel, navigate to the Size settings.
  3. Change the Width setting to a fixed value that suits your design needs. For example, you can set it to a fixed width of 200px.
  • By setting a fixed width for the logo, it will not affect the overall width of the navbar when the browser window is wide.
  1. Finally, you can adjust the padding or margins on the navbar to achieve the desired spacing around the logo and links.

By following these steps, you can make the prebuilt navbar span 100% on wider browsers in Webflow with the logo on the far left and the links on the far right, all while preserving the menu's functionality.

Additional Questions:

  1. How can I customize the styles of the prebuilt navbar in Webflow?
  2. Can I add extra links to the prebuilt Webflow navbar?
  3. Is it possible to create a dropdown menu in the Webflow navbar?