Intro
In this blog post, I’m going to show you how to anchor your website’s navigation menu to each website section. This helps with better user experience when reading and scrolling through your website. People are able to ”jump” quickly to any desired website section depending on which information they specifically need to read about. There are 2 ways of doing it, 1) by modifying our website’s section CSS IDs and 2) by using ”Menu Anchor” widget. For the 2nd way, we need elementor pro widgets readily available, so if you missed my blog post on how to use elementor professional widgets completely for free, then click on this blog post link here:
Secret Website To Download Elementor Pro Widgets For Free!
I’m also using basic elementor page builder for building my website, so hope you’re familiar with elementor so you can keep up.
Anchor Navigation Menu
Log in to your wordpress dashboard. Find your website’s navigation menu, you need to edit it. Mine is built separately in header with ”Elementor Header & Footer Builder” plugin. So I’m going to edit my header with elementor. Your navigation menu might be in your homepage, so edit your homepage. Or you might have a default theme for your wordpress website, so you need to click on ”Customize Site” to the top on your wordpress dashboard. Once you’ve found your navigation menu, we’re going to edit it. My navigation menu contains ”Portfolio”, ”Reviews”, ”FAQs” and ”Contact.” What we need to do is click on each one individually. Firstly, I’m gonna click on ”Portfolio” and under ”Content”, put #Portfolio in the ”Link” blank space provided. Repeat the process for all the remaining menus – in my case, ”Reviews”, ”FAQs” and ”Contact.” Just make sure to put hashtags under ”Content – Link” to all of them (#Reviews, #FAQs, #Contact), otherwise it is not going to work.
Edit Website Sections Headlines
In the next phase, we need to anchor our website sections. First way of doing it is by editing CSS ID of each website section. Click on each website section headline (in my example – ”Portfolio”, ”Reviews”, ”Frequently Asked Questions” and ”Contact”). Afterwards, click on ”Advanced” settings. Scroll down until you find ”CSS ID”! Now put the same names of your website’s navigation menu, but without hashtags for each website section headline. So put only ”Portfolio”, ”Reviews”, ”FAQs” and ”Contact” under ”Advanced – CSS ID.” Hashtags only need to be in your navigation menu, and not in your website’s sections parts. Once you’ve put your CSS ID names of your website sections headlines in the ”Advanced” settings, click on ”Publish” to save your changes.
Use Menu Anchor Widget
2nd way of anchoring your website’s sections headlines is by using ”Menu Anchor” widget. So you also need to edit your homepage with elementor. Step 1 is to search for the widget ”Menu Anchor.” You’ll need elementor pro widgets ready to use, so if you missed my tutorial on how to use elementor professional widgets completely for free, read this blog post:
Secret Website To Download Elementor Pro Widgets For Free!
Step 2 is to drag and drop ”Menu Anchor” widget right above each website section. In my case, I’m going to drag & drop ”Menu Anchor” widget right above my ”Portfolio”, ”Reviews”, ”Frequently Asked Questions” and ”Contact” website section headlines. Final step is to click on each ”Menu Anchor” widget individually and type ”Portfolio”, ”Reviews”, ”FAQs” and ”Contact” under ”ID of Menu Anchor.” Just make sure to put the same names like you did for each navigation menu, but without hashtags. ”#Portfolio”, ”#Reviews”, ”#FAQs” and ”#Contact” should only be in your navigation menu under ”Link.” Finally, click on ”Publish” to save your changes. If you’ve done everything correctly, it should work perfectly. Watch my quick video next where I test fast speeding from each navigation menu to each website section. Hope yours works as well!
Bottom Line
Purpose of this blog post was to show you how to quickly navigate to any website section by anchoring your website’s navigation menu (Portfolio, Reviews, FAQs, Contact) to each website section. Now you’re able to ”jump” fast to read any desired website information. Your website now displays a much better user experience! Appreciate you reading this post until the end, have a nice day ahead!