• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 04.10.19, 10:35
  • Opened by: Sylvain Duval
  • Closed by: Marek
  • Closed on: 01.11.19, 18:54
  • Reason: Closed
  • Comment: Glad to help!

Ticket #15777 - Login/register on header not responsive

Hello,

I realized that Login/register link (on header) is not responsive on mobile device on jerichocosmetics.fr .

See the screen print.

Could you tell me how to solve this issue ?

Regards

Comments

Marek 04 Oct 2019, 10:55

Try following CSS:

@media (max-width(500px)) {
#pattern #header .customer-form-container {
left:0;
right:auto;
transform: translateX(0)
}}
Sylvain Duval 04 Oct 2019, 11:10

Issue still here. Plus, when menu is open and then you clic on “log/register”, there is an overlay problem (see screen print).

Also, in the back office, when I click on “theme settings” red issues display (see screen print).

Marek 04 Oct 2019, 11:26

Sorry, there was a mistake in my code:

@media (max-width:500px) {
#pattern #header .customer-form-container {
left:0;
right:auto;
transform: translateX(0)
}
}
Marek 04 Oct 2019, 11:27

As for theme settings, just click Apply button a couple of times

Sylvain Duval 04 Oct 2019, 11:40

Red issues are solved, but responsive issue’s still here.

Marek 04 Oct 2019, 11:43

Don’t forget about a cache. The issue is solved for me

Sylvain Duval 04 Oct 2019, 11:52

ok, responsive issue is solved, but there is still a problem of overlay.
When you click on “log/register”, you can’t close it by clicking again. So you can’t access to the menu…

Marek 04 Oct 2019, 15:52

Try to add following JS to Theme Settings → Customer JS

$(document).ready(function() {
    $('.pk_register > a').on('click', function(){
        if ($(this).parent().hasClass('dd_el_hover')) {
            $(this).parent().removeClass('dd_el_hover');
            $(this).find('.dd_view').css({'display':'none'})
        }
    });
});