Webflow sync, pageviews & more.
NEW

How can I expand and modify the main menu in Webflow to change the links and other content on my purchased template?

TL;DR
  • Open the Navbar in Webflow's Designer via the Navigator and expand the menu using the menu toggle if necessary.
  • Edit or add menu links directly in the canvas or Navigator, adjust their settings, and style them using the Style Panel.
  • Test the updated menu on all device views and publish the site once it looks and functions correctly.

To expand and modify the main menu in Webflow from a purchased template, you'll need to edit the existing Navigation (Navbar) component and customize its content to match your needs.

1. Locate the Menu in the Navigator

  • Open your project in Webflow Designer.
  • On the left sidebar, click the Navigator (arrow icon) to see all layers.
  • Find the Navbar or custom Navigation Wrapper element—typically located in the Header section.

2. Expand the Menu for Editing

  • If the menu is a Dropdown or Mobile Menu, click on it in the Designer to show its expanded state.
  • Toggle the menu open using the purple "Open Menu" button (with the hamburger icon).
  • This allows you to modify the menu even outside Live Preview mode.
  • Click on a menu link item directly in the canvas or Navigator.
  • In the Element Settings Panel (D):
  • Change the link text directly on the canvas.
  • Change the link destination using the Link Settings:
    • For internal pages, use the Page option.
    • For external URLs, choose External URL and enter the full URL.
  • Repeat for each menu item you want to modify.

4. Add or Remove Menu Items

  • To add a new link, select an existing menu link and duplicate it (Cmd/Ctrl + C, then Cmd/Ctrl + V) or drag in a new Link Block or Text Link from the Add Panel (A).
  • Position it within the Menu Wrapper or Nav Menu container.
  • To remove a link, select it and press Delete.

5. Adjust Menu Content and Style

  • Modify fonts, colors, spacing, and hover effects using the Style Panel (S).
  • Use Combo Classes if you want variations between links.
  • Ensure mobile responsiveness by switching to tablet and mobile views and adjusting layout or menu behavior if needed.

6. Save and Test

  • Click Publish to test your updated menu on the live site.
  • Make sure all links work and look correct on desktop and mobile views.

Summary

To customize your purchased template’s menu in Webflow, open the Navbar in the Designer, expand the mobile menu if needed, modify or add links, and adjust styling via the Style Panel. Always test your changes on all device breakpoints before publishing.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I implement a pop-up that activates when a reader tries to close the browser tab or window using JavaScript in Webflow?
How can I prevent all items in a Webflow collection from getting updated when I select either a PDF or URL for a specific item?
What are the differences between using columns and grids in Webflow for arranging content in two columns?
How can I track a form's source in Webflow using hidden fields?
How can I ensure that the meta titles and meta descriptions I enter on my Webflow site are indexed correctly on the SERPs for better SEO?
How can I show ellipsis (...) when text is cut off in a Webflow textbox due to the size of the block? Can anyone provide the necessary code or solution? Thank you!
How do I upload an XML sitemap to Google Search Console for a site published with Webflow on a custom domain?
Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?
How can I call my JavaScript function to delay page load and load a sub page in Webflow?
How can I isolate the specific class in Webflow to resolve links not wrapping in mobile view without breaking other components?
How can I remove the 'Tap to Unmute' button that appears on top of autoplay videos on mobile in Webflow?
Why does the 'max width' attribute not work on forms in Webflow? I am attempting to increase the size of my form for desktop screens while maintaining responsiveness for mobile devices, but when I use 'max width', it gets cut off on phones. I noticed that when I place an element like a paragraph inside the form and apply the 'max width' attribute, the form displays correctly with the desired maximum width and remains responsive on smaller screens.
Is Webflow the platform used to build the website with a fixed half and scrolling section?
How can I improve performance on a client site in Webflow?
Does Webflow have a fix for the bug where the previous page does not appear when using the native browser buttons in Safari?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?