Some website designs allow you to add images and extra content to your navigation menu to make it more visually appealing and informative for visitors. This feature is perfect for highlighting important announcements, showcasing school events, or adding visual elements that represent your school's brand.
When Can I Use This Feature?
Not all website designs support additional media in navigation menus. If your school's website design includes this capability, you'll be able to add images to specific menu items to create what's called a "mega menu" - an expanded navigation area with rich content.
Step-by-Step Instructions
Follow these simple steps to add images to your website navigation:
Step 1: Access Your Navigation Settings
Navigate to the Site Navigation section of your content management platform.
Step 2: Select the Menu Item to Edit
Find the menu item where you want to add an image or extra content. Click the three-dot icon (⋯) next to that menu item, then select Edit Link from the dropdown menu.
Step 3: Expand Additional Content Options
Look for the Additional Content section in the editing panel. Click the arrow next to it to expand this area and reveal the image upload options.
Step 4: Upload Your Image
You have two options for adding an image:
Click the Upload link to browse and select an image from your computer
Drag and drop an image file directly into the upload area
Step 5: Add Accessibility Information
In the alternate text field, enter a brief description of your image. This text helps screen readers describe the image to visually impaired users, making your website more accessible to all visitors.
Example: If you upload a photo of students in the library, your alt text might be "Students reading books in the school library."
Step 6: Save Your Changes
Click the Save button to publish your changes. Your new navigation image will now appear on your live website for all visitors to see.
Best Practices
Image Guidelines:
Use high-quality images that represent your school positively
Keep file sizes reasonable for faster website loading
Choose images that are clear and easy to see at smaller sizes
Accessibility:
Always include descriptive alt text for every image
Make sure your alt text is concise but informative
Avoid using phrases like "image of" or "picture of" in your alt text
Content Considerations:
Use images that are relevant to the menu section
Update images regularly to keep content fresh
Ensure images align with your school's branding and policies