How to Customise Your Menu Block

Customise the Layout and Design of your Menu Block — to provide organised and structured website content that is easy to navigate through and most efficient for users.

What is a Block?

A Block is a ready-made section of a website layout — such as a Menu, Banner, Footer, Pricing, or Contacts section — which you can use to build your website page in Sitebeat.

Follow the steps below to customise the Menu Block:

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option of the website that you wish to manage.
  3. Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.

    Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.

    Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.

    You can now edit the new site that you wish to manage.

  4. On your Site Editor, hover your mouse pointer over the Menu Block, which is topmost section of your website template, and then click the Layout Icon that appears on its right edge.
  5. Under the Layout tab on the pop-up box, manage your Menu Block items as follows:

    Add a Menu Item — Click Add Feature, and then select the item to add it to your Menu Block.

    Note: The items that you can add to the Menu Block are the Logo, Menu, Buttons, Social Buttons, and Shopping Cart. You can add a maximum of four items in the Menu Block.

    Edit a Menu Item — Hover your pointer over a Menu Item on the pop-up box. Click the Edit button on its right, and then follow the respective instructions below to customise each item:
    Logo Follow steps 4 and 5 on this guide.
    Menu Follow the steps below to configure the following:
    Font Size & Padding Click on the bar under each to adjust the font size and distance between Menu items.
    Font type, Style, & Format Select a setting from their respective drop-down lists.
    Text & Active Click the box on the right of each option to select a text color for Inactive and Active items within your Menu, and then click Apply to save changes.
    Swap Submenu Colors Click to enable or disable this option.
    Menu Style Click on the box and select the desired Menu Style to change it.
    Button Follow step 3 on this guide.
    Social Buttons Follow step 6 on this guide.

    Note: Click the [←] Back Icon to return and edit other items.

    Delete a Menu Item — Hover your mouse pointer over the Menu Item, and then click the [x] Icon on its right.

    Reorder Menu Items — Click and drag the Menu Item to move and reorder items.

  6. Click on the Design tab on the pop-up box to customise the following:
    Background Color Click the box on its right to select a Color, and then click Apply to use it. Click on the bar below the Background label to adjust its intensity.
    Alignment Select the corresponding icons to align Menu items to the left, centre, or right of the website page.
    Top & Bottom Borders Click the box on its right to select a Color. Click Apply to use it, and then click on the bar below it to adjust its intensity.
    Hamburger Menu Click to enable this option and compress all the Menu items into a single clickable Hamburger Menu Icon.
    Fixed Menu Option Click to enable this option and freeze the Menu Block at the top of the browser, while you scroll down to the bottom of the page — giving website visitors quick navigation access.

Hit the play button below to view the quick start guide we've prepared for you:

You can also check out more video guides by visiting our YouTube How-To Playlist.

Was this helpful?
64% of people found this helpful.