Portfolio: Bootstrap Navbar breaks down on mobile. any tips?

Hey! So I’m in the process of coding my portfolio and there seems to be an issue with my Navbar becoming non functional when I switch to mobile. It switches to a dropdown menu once the screen is too small, and this drop down menu works fine if I resize my laptop browser and use it. When I open it on my phone, however, there are two issues:

  1. The nav bar does not stay fixed to top, and i scroll passed it .
  2. the navigation buttons on the nav bar do not work.

These are non-issues on a computer, but seem to be an issue on mobile. From my understanding bootstrap is supposed to take care of all that? Any help would be greatly appreciated!

EDIT: This appears to only be an issue on apple mobile devices, so if there’s any specific insight into that please let me know! I can’t find anything specific that works…

I am unable to recreate the problems you are stating you have.
I just ran your pen on a droid mini, which has a very narrow screen, and all seemed to function correctly.

1 Like

I see, I’ve only been testing it on apple mobile devices which leads to the result. Thank you for checking though! This helps narrow down the issue. :smile:

Also, because your pen works correctly in my desktop browsers both chrome and firefox I would think you are on the right track, thinking it may be an apple specific problem.

1 Like

Is this bootstrap 3 or 4?

BS3 works fine on Apple devices.

1 Like

Took a look at your page. You should be using anchor name tag, not anchor Id.

1 Like

I am using 3.3.7, for both CSS and Javascript. I’ve tried using the name tag instead of ID, however the same issue persists on mobile… I would still use href="#whatever" to reference it right? if so, the issue still persists… I also tried using what Wikipedia uses, to no avail.