2

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:

Screenshot of what I would like to achieve

  • Hard to tell without seeing any code or a link to your site – Lodder Oct 8 '14 at 22:52
  • Hi, here is a link to my site: kfumlokin.konsult.fo – Hammur Oct 8 '14 at 22:55
  • You can change the position with a simple bit of CSS. It will still slide down, but you can also change how this works using jQuery – Lodder Oct 8 '14 at 22:59
  • I could use the css e.g. "top: 550px !important;" to adjust it. but overrides the auto calculation. Will look properly on one page, but be misplaced on another page that might be shorter or longer? – Hammur Oct 8 '14 at 23:14
3

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 1

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.

Option 2

  • Thanks, think I will stick with option 1. Option 2 didn't seem to work very good, seemed to have a different position on different pages which had different page-height. Though this is what I was originally thinking of doing. – Hammur Oct 9 '14 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.