How to display a login access form on hover – Divi

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 on hover - Divi

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. Let’s dive in! 🙂

Step One – Create your custom menu in Divi theme builder

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

divi row settings
divi row width and height

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 on hover - Divi
How to display a login access form on hover - Divi

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

Step Two: Create the trigger button in the header menu

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‘.

add a class to wordpress menu item
add a class to wordpress menu item

Step Three – How to display the 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. Learn more here).

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

.ds-login-form { 
  position: absolute; 
  right: 119px; 
  margin-top: 13px; 
  display: none; 
  z-index:99; 
}

Finally, 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.

add a custom code to Divi
jQuery(document).ready(function( $ ) { 
  $('.ds-account').mouseover(function(){ 
    $('.ds-login-form').fadeIn(); 
  }); 
  $('.ds-login-form').mouseleave(function(){ 
    $('.ds-login-form').fadeOut(); 
  }); 
});

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

9 thoughts on “How to display a login access form on hover – Divi”

  1. Running into an issue where the dropdown row is visible on page load. Then if you hover over the menu item and remove your mouse it disappears as expected.

    Tried adding an ‘!important’ to the css next to visible:none; that disabled the item entirely. Thoughts?

    Reply

Leave a Comment