Navigation Menu

How to customize the navigation menu on your Madra website.

The navigation menu is one of the most important elements of your website. It helps visitors find their way around your pages quickly and directly affects user experience. Madra builds your navigation menu automatically when your site is created, but you can customize it at any time through a change request.

How does the navigation menu work?

Your website's navigation menu is located in the header, at the top of every page. It contains links to your main pages and is visible on both desktop and mobile devices.

The menu typically includes:

• Your logo. Positioned on the left, it always links back to the home page.
• Page links. Horizontal text links in the center or right area of the header (for example: Home, About, Services, Contact).
• CTA button (optional). A highlighted button on the far right, such as "Get a quote" or "Call us."

The menu is consistent across all pages. Changing it once updates it everywhere on your site.

How do I reorder the menu links?

To change the order in which pages appear in your navigation menu:

1. Log in to your dashboard.
2. Go to Change requests.
3. Click New request.
4. Specify the desired order of your menu items. For example: "I would like the menu order to be: Home, Services, About, Gallery, Contact."
5. Click Submit.

Our team will update the menu order and apply the change to every page on your site.

Can I add external links to the menu?

Yes, you can add links to external websites or resources in your navigation menu. Common use cases include:

• A link to your online booking platform (e.g., Doctolib, Calendly)
• A link to your online store on a separate platform
• A link to your social media profiles or review page

To add an external link, submit a change request and provide:

• The label you want displayed in the menu (e.g., "Book now")
• The full URL (e.g., https://calendly.com/your-business)
• Whether the link should open in a new tab (recommended for external links)

How does the menu work on mobile?

On mobile devices and small screens, the navigation menu automatically adapts to a responsive format. Instead of a horizontal bar, visitors see a hamburger icon (three horizontal lines) in the top corner of the screen.

When a visitor taps the hamburger icon, the menu opens as a full-screen or slide-out panel displaying all your navigation links vertically. This behavior is built into every Madra website and does not require any configuration on your part.

The mobile menu includes:

• All the same links as the desktop menu, in the same order
• Your logo at the top
• The CTA button, if one is configured
• A close button to dismiss the menu

How do I add or change the CTA button?

A call-to-action (CTA) button is a highlighted, attention-grabbing button in your navigation bar designed to drive visitors toward a specific action. Common CTA button labels include:

• "Get a free quote"
• "Book an appointment"
• "Contact us"
• "Call now"
• "Order online"

To add or change a CTA button in your menu, submit a change request with the following details:

1. Button text. The label displayed on the button.
2. Destination. Where the button should link to (a page on your site, a phone number, an email address, or an external URL).
3. Style preference (optional). If you want a specific color or style, mention it. Otherwise, our team will match your site's existing design.

The CTA button appears on both desktop and mobile versions of your site. It is styled differently from regular menu links to stand out visually.