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


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

Chris Sweeney pro premium asked a year 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 a year 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 premium commented a year 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 premium answered a year 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 a year ago

Try init parallax inside document ready function.


Chris Sweeney pro premium commented a year 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 a year ago

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


Chris Sweeney pro premium commented a year 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 a year ago

I'm glad I could help you.

Best, Grzegorz.


Please insert min. 20 characters.
Status

Answered

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