Elementor: Dropdown Select Box Navigation Tutorial

1
1331
Select Box Elementor

Recently i had a client that wanted to have a Dropdown Select Box as navigation to scroll to sections within a page. Even though i have an subscription to Elementor Pro, there was, unfortunately no Elementor widget that has with this option.

The image above shows the basic structure that i want to achieve. With the select box dropdown navigation on the top and 3 different sections that i want to scroll to at the bottom. Of course, the sections are not going to be this narrow in height. You get the gist.

Anyway, this such a simple thing to do that we don’t really want to use a widget for this. All we need is a few lines of HTML and Javascript.

For context, i am using the Hello Elementor Theme with Elementor Pro installed. Depending on your theme, the select box may look different.

How to add a Select box in Elementor

Let’s get started on building our Select box dropdown navigation.

First, we will need to use the HTML Widget. If you cannot find it, all you have to do is to type “html” in the Elementor search box.

You’ll see 2 widgets, the HTML widget and the default WordPress Custom HTML widget. Technically any one of the widgets is fine. Now drag the widget to your desired location for the Select Box.

Add Select Box HTML codes

Next, copy and paste in the HTML codes for the structure for the Select box as seen below.

<select id="mySelect">
   <option>SECTION 1</option>
   <option>SECTION 2</option>
   <option>SECTION 3</option>
</select>

In this example, we have declared a select element and given it and identifier “mySelect”. In addition to that, we have added in 3 options. Labeled as such, Section 1 – 3. Of course, you can change this to your desired Labels. Once you have done so, your preview should be clickable like this.

Preview for select box

Assign IDs

Now we are going to give each section a unique Identifier. To do this, select the section in Elementor Editor and click on the “Advanced” tab. Look for a field called “CSS ID”.

In this case we are simply naming each section “sect1″,”sect2” and so on. You can name the IDs in a way that makes sense to you. But remember, that when naming IDs we shouldn’t include any spaces or symbols (except for dash symbols).

Elementor Element ID

Now that we are done with the structure, it’s time to add the controls for interaction.

Javascript for Scrolling

Similarly to inserting HTML, we use the HTML widget to insert Javascript into Elementor. Note that we are inserting the Javascript AFTER the sections. This is to ensure that the Elements that we are using is already loaded in the document.

Insert Javascript Elementor

Copy and paste the following code into the widget and change the variables accordingly.

<script>
// Change mySelect to your Select Box ID
sel = document.getElementById("mySelect");
// Change "sect1" to your section IDs
sect1 = document.getElementById("sect1");
sect2 = document.getElementById("sect2");
sect3 = document.getElementById("sect3");

sel.addEventListener('change', function(){
   idx = sel.selectedIndex;
   // Log for debugging
   //console.log(idx);

   switch(idx){
   case 0: sect1.scrollIntoView({ behavior: 'smooth'});break;
   case 1: sect2.scrollIntoView({ behavior: 'smooth'});break;
   case 2: sect3.scrollIntoView({ behavior: 'smooth'});break;
   default: break;
}
});
</script>

Notice we are not using JQuery for this. Because, well, we don’t have to depend on JQuery for this interaction. And since we are inserting a Javascript code inside the body of the document, JQuery may not have loaded at this point. So it is more prudent to use vanilla Javascript instead.

Let me explain a little bit on the Javascript. First we assign a variable to the objects that we need to reference. Like so:

sel = document.getElementById("mySelect"); 
sect1 = document.getElementById("sect1"); 
sect2 = document.getElementById("sect2"); 
sect3 = document.getElementById("sect3");

This is basically for convenience when we need to reference to the objects. Instead of typing document.getElementById(“…”) all the time, we can simply just reference the variable that it has been assigned to.

This next bit is to add a listener to listen for a change event. Ie. when the user clicks on the Select Box and selects a different option. Then we added a switch conditional statement to check for the selected index.

sel.addEventListener('change', function(){ 
   idx = sel.selectedIndex; 

   switch(idx){ 
      case 0: sect1.scrollIntoView({ behavior: 'smooth'});break; 
      case 1: sect2.scrollIntoView({ behavior: 'smooth'});break; 
      case 2: sect3.scrollIntoView({ behavior: 'smooth'});break; 
      default: break; 
} });

Within the Switch statement, we use the scrollIntoView Web API to tell the browser to scroll to the targeted section.

For our Navigation Select box to be intuitive, we need to make it “Stick” to the top. Otherwise, its kinda silly when the page scrolls down only for the user to use the scoll bar to scroll upwards to see the select box again.

This could be easily done with Elementor Pro. Simply select the Section with the Select box, select the “Advanced” tab and then look for “Scrolling Effect” and then set it as “Top”. And other options as you deem necessary.

Remember that your sections need to be larger (taller) for scrolling to work.

Conclusion

So there you have it. An easy to implement Select Box Drop down navigation in Elementor with plain ol Javascript. We hope that this tutorial will help you master Elementor and Web Design in general. Do check out our other WordPress and Elementor related articles.

1 COMMENT

  1. Thank you very very much for this.
    I have been looking for it 🙂

    is there a way to make other sections hide , when one section is selected. That would be great.
    Regards and Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nineteen − thirteen =