Topic: navbar dropdown doesn't work when toggled (on phone)

Chris Sweeney pro asked 2 years ago


Hi

My site seems to work fine, until it's viewed on a phone/portrait tablet; when the navbar is toggled the dropdown doesn't work.

Same behaviour happens when trying bootstrap 4.14

Link to site

I've tried it on iPhone, Android phone and iPad mini and all have the same issue.

Cheers Chris


Grzegorz Bujański staff commented 2 years ago

Hi. I tried recreate this, but working well. It looks like the problem only occurs on your site. Are you adding your own events to the navbar? Can you recreate this issue here: https://mdbootstrap.com/snippets/ ?


Chris Sweeney pro commented 2 years ago

I wonder if something is missing; I've created a parallax page using the info on https://mdbootstrap.com/snippets/jquery/pjoter-2-0/934696 at https://chesterpropertyrentals.com/par.php and there are no parallax actions at all.

Cheers Chris


Chris Sweeney pro answered 2 years ago


I've solved it:

I had a script, presumably from an earlier version:

    $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });

However, I don't think this explains the parallax problem!

Chris


Grzegorz Bujański staff commented 2 years ago

Try init parallax inside document ready function.


Chris Sweeney pro commented 2 years ago

Thanks Grzegorz I have it working now, except for the 2 small images.

test page: https://chesterpropertyrentals.com/par.php mdb snippet: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/934696


Grzegorz Bujański staff commented 2 years ago

small images have another class. Add this to your code: jarallax(document.querySelectorAll('.jarallax-keep-img'), { keepImg: true, });


Chris Sweeney pro commented 2 years ago

Great! Thanks Grzegorz - works fine now.

(Perhaps this should be included in the tutorial about the page?)

Cheers Chris


Grzegorz Bujański staff commented 2 years ago

I'm glad I could help you.

Best, Grzegorz.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: phone/ipad mini
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes