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.

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

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. That’s 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.

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

Ok. Now we are done with the basic setup. Let’s 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‘.

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.

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

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.

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.

8 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?

    Site in question: https://fdsatrainingcamp.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This