Creating the Header Menu

Creating your own menu and setting it up to appear on your site.

If you imported the Blogger template you will currently have a dark menu with sub-menu items, a shopping cart icon and a search icon, as seen below.

This menu can be customized to show your own menu items, by going to Appearance -> Menus -> and select the Home (Primary Menu).

With your menu select, you can start editing the existing menu items, deleting them and adding your own.

We recommend to create a new menu and not use the existing demo menu.

To do this, click on create a new menu link.

Enter a name in the Menu Name and click on Create Menu button, for example My Home Menu.

You can now start adding your own items to the newly created menu.

If you have already created content on your site – pages, posts, etc – you can now add them to your menu.

For example, let’s consider the following menu layout:

  1. Home – pointing to the home of your site
  2. About Us – pointing to the About Us page
  3. Travel – pointing to a page where all posts from Travel category is shown
  4. Shop – pointing to a page where you want to show products
  5. Contact Us – pointing to the Contact Us page

You must first create some content on your site, a page that will be used as the front page of your site – name it Home Page, an About Us page, a Contact Us page. add some Posts to your site or use the existing demo posts and finally create some Products and configure the WooCommerce to point to a page where all your products are listed – call the WooCommerce products page: Shop.

With your content created you can now add items to your new menu.

From the left sidebar of your Appearance -> Menus page, expand the Pages box and let’s start searching for our menu items. Click on View All tab to view all your existing pages.

Find the Home page, About us, Contact Us and Shop page and add them to your menu, by clicking on the Add to Menu button.

Next expand the Categories box and search the Travel category. Add it to your menu.

You can rearrange the menu items by click-drag each of your menu items you want to move.

Once you are satisfied with your menu, make sure you check the Primary Menu option under Menu Settings -> Display location. It’s important to set your menu as Primary Menu, otherwise it will not appear on your site.

After checking the Primary Menu, you can Save your menu, by clicking on the Save Menu button.

Your new Menu will now appear on your site, like the one below: