Yesterday I saw that someone on a Facebook group asking for help to display a login access form on hover on a menu item. Similar to the one in elegentthemes.com. So I wanted to try that myself too.

How to display a login access form

Finally I was able to create the same thing with just a few lines of codes. So I thought  to share that with you all.

OK. Lets dive in! 🙂

How to display a login access form on hover – STEP ONE – 

Create your header in Theme Builder. The way you want. I didn’t try this with the old version of Divi. So you have to create the header in Theme Builder to try this.

Then, below the header add another Row with a class name of ‘ds-login-form‘. See the image below. Thats how I did in my version. Most importantly do not forget to give it a height and a width. I gave 300px for both the height and the width. You can change this to match with your login form size.

How to display a login access form

Inside this Row, create your login form. Below is what I did. You can have any module here. Not just a login form. 🙂

How to display a login access form

Ok. Now we are done with the basic setup. Lets do the magic happen with a few lines of codes. 

STEP TWO

Let’s create the menu item which acts as the trigger button. In my version I added a My Account link to the main menu in WordPress. We need to add a class to that specific item. To enable classes in menu items you have to tick CSS Classes on Screen Options on top of the Menu Settings. (Check the screenshot below). Finally, give it the class name of ‘ds-account‘.

How to display a login access form
How to display a login access form
That’s all for the menu. Let’s move to the next step.

STEP THREE – How to display a login access form 

Add the below CSS snippet to the site. Use any method you like. (There are few ways to add CSS code to a Divi site).

Play with the ‘right‘ and ‘margin-top‘ values to place the form aligned with your menu link.

Then copy-paste below jQuery code in Theme Options > Integration > Add code to the < body >. Don’t forget to paste inside a Script Tag like below.

That’s it! Please share with your friends who loves Divi.

Pin It on Pinterest