June 6, 2023

Bricks Builder 101 Part 24: Adding Menu Anchors

Play Video

What is the tutorial about?

Adding menu anchors in Bricks Builder is the primary focus of this tutorial. Menu anchors are essential for creating a smooth navigation experience on your WordPress site, especially for one-page websites or pages with long content. They allow users to jump to specific sections of your page by clicking on a link in your navigation menu. This tutorial will guide you through the process of adding these anchors using the Bricks Builder plugin for WordPress.

Tutorial Steps

  1. Identify the sections for anchors:
    Decide on the sections of your page where you want to place the anchors. In this tutorial, we will be placing anchors in the ‘Details’, ‘Services’, ‘Team’, and ‘Contact’ sections.
  2. Add CSS IDs to sections:
    Navigate to the section where you want to place the anchor. Go to ‘Style’ and scroll down to ‘CSS ID’. Here, input the name of your anchor. For instance, for the ‘Details’ section, you can input ‘details’ as the CSS ID.
  3. Link the anchors to menu items:
    Go to the menu item that you want to link to the anchor. In the ‘Link’ option, select ‘Dynamic data’ and input the name of your anchor preceded by a hashtag. For instance, to link to the ‘Details’ section, input ‘#details’.
  4. Optional – Add section titles:
    If you want to add a title to your sections, you can do so by adding a heading above the container in each section. This is optional and depends on your layout and design preferences.
  5. Update your navigation menu:
    Go to ‘Appearances’ > ‘Menu’ in your WordPress dashboard. Here, add custom links for each of your anchors. The URL should be your page URL followed by the anchor name preceded by a hashtag. For instance, ‘yourwebsite.com/#details’. The link text should be the name of the section.
  6. Save and test:
    Save your changes and test the navigation on your page. Clicking on a menu item should now take you to the corresponding section on the page.

Use Cases for this Tutorial

  • One-page websites:
    If your website consists of a single page with multiple sections, menu anchors can improve navigation and user experience.
  • Long-form content:
    For blog posts or pages with long content, menu anchors can help users navigate to specific sections quickly.
  • Portfolios:
    If you’re showcasing your work or projects on a single page, menu anchors can allow users to jump to specific projects or categories.
  • Product pages:
    On a product page with multiple sections like product details, reviews, and specifications, menu anchors can improve navigation.

Required Resources

Bricks Builder Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Bricks Builder 101 Part 24: Adding Menu Anchors
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.