Module: Plus User Panel

Question

would like to ask if anyone know how to recalculate the position of the dropdown of the user menu for this module. The modules works in the way that it opens up a user panel in dropdown when clicked.

On our website we positioned this at the bottom right, so that the login is less visible for guests. But this also works a little stupid since the dropdown drops further than the footer, making the background color visible for the increased height.

The element auto calculates the top depending on the how big the page is, so it is always positioned below the "Hey, username" link. Would like to get this to be calculated to be above the "Hey, username" link instead of below. It will of course look a little weird having a dropdown coming from above the link instead of below, but I think it will work better.

Any ideas?

Screenshot of what I would like to achieve:

Answer 1

Here's a couple of ideas. They will give different results, depending on what you prefer:

Option 1: Center the login box on the screen:

Try adding this to your CSS to center the box on the screen:

#plusl-content-login {
 position: fixed!important;
 top: 50%!important;
 left: 50%!important;
 transform: translate(-50%, -50%);
}

Option 2:

(Only tested in Chrome developer tools) You can try to add this jQuery code somewhere in the file JOOMLAROOT/templates/j51_polaris/index.php (near the bottom right before </body> should work fine):

<script>
  jQuery(document).ready(function() {
     var logintop = jQuery( ".plusl-content-block" ).css( "top" );
     jQuery(".plusl-content-block").css( "top",parseInt(logintop, 10) - 350 + "px" );
  });
</script>

This will basically move the login box 350px (the default height) upwards of its original position.