Would you like to find out how to create a One Page navigation menu in Elementor ?
There are websites that have only one page (the home page). Even when you click on a navigation menu item, you will be taken to another section of the same page instead of another page.
The objective of this type of Website is to ensure that the visiteurs focus on your content. In addition to content, another key element of a Website to a page is the navigation menu. In Elementor, it is very easy to create the navigation menu of a Website to one page.
This article will show you how.
To give you an overview, here is an example of a one-page website navigation menu.
As mentioned, it is not difficult to create the navigation menu of a one-page website like the one above in Elementor.
Although some add-ons, such as Essential Addons et PowerPack, come with a widget for creating navigation on a page, you can also create one without installing any add-ons.
The main idea is to point a menu item to a certain section of the page. To do this, you need to add a CSS ID to the section you want to point to.
Read also: How to set custom position for mobile menu in Elementor
Let's take an example.
Suppose you have a menu item called "Classes" and you want your visiteurs be directed to the "Classes" section of your one-page website each time they click on the "Classes" menu item.
First, edit the page with Elementor and select the “Classes” section (use the browser for your convenience).
Once the Classes section is selected, go to the tab Advanced from the left panel and open the block Advanced. Enter theCSS ID of the section in the field CSS ID.
Repeat the above steps for other sections you want to designate with menu items.
Calling CSS identifiers
You can use any Elementor widget that has an option to add a link to call each CSS id you've added to sections. Just paste the CSS id in the link field. Add the " # as a prefix.
If you want to use the Nav Menu widget, you can change the menu you use. In the URL field of each menu item, type the CSS ID with the "#" as a prefix.
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how create a fullscreen menu in Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
