Menu Widget

In this video we'll discuss all things menus! We'll talk about how to add a menu and style it, and where the best placements are for your site menus.

Introduction

Welcome to our support guide on managing the menu widget within Churchly - your go-to communication and website builder platform for creating engaging church websites. Follow these steps to add, customize, and efficiently use the menu widget in your site’s design.

Adding the Menu Widget

Step 1: Locate the Header Area:

• The menu widget is best placed in the header area, which appears across every page of your website for consistent navigation.

Step 2: Add a New Menu:

• If you accidentally delete your existing menu or need to start from scratch, simply select the area in the header where you wish to add the menu widget and drag and drop the widget into place. You can also hover over the header, and add a menu widget from there. 

Step 3: Insert Menu Items:

• With the menu widget in place, it’s time to populate it with items. Navigate to your site’s page directory and begin adding pages to your menu. Common additions include "About Us," "Staff," "Online Giving," "News and Events," and "Contact Us."

Customizing the Menu Widget

Step 1: Adjust Menu Design:

• Once your items are added, you might notice the default styling doesn’t fit your website’s aesthetic. Click on the styling icon (paintbrush) to start customizing.

Step 2: Styling Your Menu:

• Orientation: Choose between a traditional horizontal layout or a modern vertical design.
• Text Color & Background: Select colors that align with your website’s theme. Ensure text is easily readable against the background.
• Font Style & Size: Match the menu’s text font and size to your website’s branding. 
• Hover and Active Item Color: Customize colors or add borders to indicate hover and active states, improving user interaction.

Step 3: Organize Menu Items:

• Rearrange your menu items or create submenus by dragging and placing items underneath primary ones. Avoid overcomplicating navigation with too many layers.

Finalizing the Menu Design

Step 1: Check for Responsiveness:

• Ensure your menu adapts well to different screen sizes. The header area is ideal for its responsive behavior, transforming into a hamburger menu icon on smaller screens.

Step 2: Save Changes:

• Always preview your changes and save them once you’re satisfied with the menu’s appearance and functionality.

Step 3: Refresh and Test Your Website:

• View your updated website in various browsers and devices to ensure the menu operates as expected, providing a seamless experience for all users.

Need Further Assistance? 

If you have any questions or need further assistance, click on the "Need Some Help" button on your dashboard to reach out to our support team. We're here to help you make the most out of your Churchly website and ensure you can effectively reach your community.