Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Navigation Menu in WordPress and How to Create It


I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

Call to Action WordPress Block in Gutenberg and How to Build It
Prew post
  • Mar 17, 2020
  • 3 min read
  • 468

Navigation Menu in WordPress and How to Create It

From our today’s tutorial, you will figure out what is a navigation menu WordPress block on your landing page. You will also learn how to create it and apply it to your one-page website. While the typical website uses a menu as a navigation tool to move from one page to another, the navigation menu of WordPress landing page will sail you to the needed section.

Each menu item is a so-called anchor. Although, the landing page may be quite long and people won’t spend their time scrolling to a certain block. Jump links are used in listings or tables to navigate users to the part of the page they are looking for.

Adding a Navigation Menu WordPress Block

In case you are still trying to puzzle out where to start building an anchor menu, this topic is for you. Everything starts in the Gutenberg editor area, as usual.

Firstly, go to your landing page and find a section, where you want to place an anchor. Remember, that in Gutenberg you can’t give a web address to any Image block. That is why we will give the link to the Heading blocks.

After that, open the Advanced tab and enter a word or two in the HTML Anchor field. Do it with each section on your landing page you want to link.

Navigation Menu in WordPress

As a next step, you need to move to the admin dashboard > “Appearance” > “Menus”. Whether you already have a menu or not, you should create a new one. Give your menu a name in the “Menu Name” field and click the “Create Menu” button.

add a name

After that, take a look at the Menu Structure area. Here you can change the menu name and here your items will showcase.

In the Menu Settings area, choose where to display menu location on your landing page. In fact, you can place it wherever you want, even in the footer.

Use the Custom Links tab to add the anchor links with the titles to your menu.

use links

Firstly in the URL field, you need to write the anchors, you gave to your sections, beginning with “#” with no spaces. In the Link Text field, you are able to give your link any name you want to display as a menu item. Don’t forget to save the menu after adding all anchors.

We will create a navigation menu with a few landing page sections:

link text

Customize the Menu

Now, let’s go to the draft of your landing website. Add a Navigation block at the top of your page and click on the “Create empty” text.

choose a layout

Type each of your HTML anchors, that you’ve given to the sections before. You can enable them to open in the new tab, add nofollow to link and write down the description.

add menu items

After you’ve added all HTML anchors to your navigation menu, you are able to style it up. Choose one of the layouts, replace the items and set the text size.

customize links Navigation Menu in WordPress

Take a look at the result of your work! We hope you enjoyed these simple steps of adding a navigation menu WordPress block on your landing page.

Navigation Menu in WordPress

Check the other tutorials to create a vivid and multipurpose landing page website.

Tips on How to Optimize WordPress Speed Quickly
Next post
Call to Action WordPress Block in Gutenberg and How to Build It
Prew post
Tips on How to Optimize WordPress Speed Quickly
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.