Skip to main content
Header menu
Updated over a week ago

Headers are a crucial element of any website, serving as the primary navigation hub. This guide will walk you through the steps to modify and customize the header of your website to enhance usability and aesthetics.

Understand Your Template: Depending on your starting template, the design of your header may vary. Typically, headers are divided into a top row and a bottom row, containing elements like navigation links and social media buttons.

Adding or Changing Your Logo

Your logo is an important part of your brand identity. It appears on your website, social media profiles, and marketing materials. In order to make sure your logo is always up-to-date, you can easily add or change it on Maindesk.

To add or change your logo, follow these simple steps:

When choosing an image logo, we strongly recommend using the .png format for the best quality. This format supports transparent backgrounds and will ensure that your logo looks crisp and professional on your website.

If you ever need to make changes to your logo, simply follow these steps again.

Note : logo will always redirect to the home page per default when clicked.

Add links to your menu

Adding menu items and links to your website is a great way to make it more user-friendly and organized. With our easy-to-use menu editor, you can quickly add and customize menu items to fit your needs.

To get started, simply follow these steps:

Once you have selected the type of link, you can then choose where the link will open - in the same tab or a new tab. You can also choose to make the link "nofollow" if you do not want search engines to follow it.

You will have the ability to chose where your items redirect when clicked :

You can link to :

  • Page

  • Store products

  • Funnels

  • External links

  • Anchor point

  • Download a file

  • Popup

  • Email

  • Phone number

Repeat these steps for each menu item you want to add. You can also rearrange the order of your menu items by dragging and dropping them in the menu editor.

Once you are satisfied with your menu, click on the "Select" button to apply the changes to your website.

Style menu

How to Style Your Menu

To style your menu, simply hover over the menu and click on the brush icon that appears. This will open the styling options for your menu.

Choosing Your Menu Style

The first option you will see in the styling menu is the choice of menu style. You can choose between a horizontal, vertical, or burger menu. Select the style that best fits your website's design and layout.

Customizing Text and Background

Next, you can modify the text font, size, and color, as well as the background color of your menu. This allows you to create a cohesive look for your menu that matches your website's branding.

Adding a Divider

If you want to add a visual separation between your menu items, you can choose to show a divider between them. This can help make your menu more organized and easier to navigate.

Displaying Uppercase Menu Items

For a more modern and sleek look, you can choose to display your menu items in all uppercase letters. This can also help make your menu items stand out and be more easily readable.

Hover Effects

You also have the option to choose how your menu items react when hovered over. You can choose to change only the text color, change the background color, or show a border around the menu item.

Customizing Submenus

If you have a submenu, you can also customize its appearance. You can modify the background, text, and hover text colors, as well as add a shadow or border to the submenu. This allows you to create a cohesive and visually appealing menu for your website.

Mega menu

A Mega Menu allows you to display a wide array of options in a large, drop-down format, enhancing navigation and showcasing multiple options or services creatively. Here's how you can create and customize your own Mega Menu.

Step 1: Access the Menu Editor

  • Navigate to the menu editor where your site's menus are listed.

  • Locate the menu item under which you want the Mega Menu to appear.

Step 2: Create a Mega Menu

  • Hover over the menu item and click the Plus (+) icon to initiate a new Mega Menu.

  • To begin customization, click on the Pencil icon to edit the Mega Menu.

Step 3: Customize the Layout

  • By default, a basic layout is provided which you can fully customize according to your preferences.

  • The default setting might display a block with three or four columns which can be adjusted as needed.

Step 4: Add and Arrange Items

  • You can drag additional items or widgets from the side panel into your Mega Menu.

  • Organize these items into columns or blocks within the menu. For example, if you have different services, you can represent each service in a separate column.

Step 5: Linking and Action Buttons

  • Ensure each item or service in the Mega Menu is linked to the corresponding page or section of your site.

  • Optionally, add action buttons to each item, allowing users to interact directly (e.g., "Learn More", "Sign Up").

Step 6: Preview and Save

  • Once your Mega Menu is structured as desired, save your changes.

  • Preview your website to see how the Mega Menu appears in the live environment. Hover over the menu item (e.g., "Pricing") to view the Mega Menu.

Tips for Mega Menu Design:

  • Visual Appeal: Ensure the Mega Menu is visually appealing and aligns with your website's design.

  • Ease of Navigation: Structure items in a way that is intuitive and easy for users to navigate.

  • Relevant Links: Make sure all links are relevant and up-to-date to improve user experience.

Did this answer your question?