bootstrap nav bar links do not work when resizing window

Question

I have created a UI which uses bootstrap 4 and I've implemented a sticky nav bar but the links do not consistanly navigate the user when displayed on smaller screens (when the hamburger menu is used).

To reproduce the bug (screen width: 760):

load page
open hamburger menu
click link (sucessfully navigates)
click home button
open hamburger menu
click link (nothing happens)

In full screen mode I can click a link and sucessfully navigate as many times as I want.

I have read other questions around this issue and they talk about the z-index, however I tried that but it does not resolve my problem.

After several hours of looking at this issue I have come to an end

Why is this happening?

NB: I have not yet posted any code from my nav bar or the associated cssc because I really have no idea where the problem is. If there is any advice that can help me narrow that down I will add the relevant piece of code

score 0 · Accepted Answer · answered May 12 '20 at 20:24

I am posting this answer in case anyone else is suffering the same pain I did.

I finally resolved this issue thanks to this question. Ultimatly the answer was that a class was added in my link that had a JS event which prevented default actions.

function active_dropdown() {
    if ($(window).width() < 992) {
        $('.menu li.submenu > a').on('click', function (event) {
            event.preventDefault();
            $(this).parent().find('ul').first().toggle(700);
            $(this).parent().siblings().find('ul').hide(700);
        });
    }
}

I was able to track it down by inspecting the element and viewing the attached event (as explained in the link posted above)

bootstrap nav bar links do not work when resizing window

1 Answers1