Hi all - I’m working through my portfolio page and came across an issue when switching between mobile and desktop. The navbar stays fixed on the desktop version, but on my ipad and iphone (safari), it does not stay fixed. Any thoughts?
1 Like
@iloanzi, apparently there is a problem with using position: fixed in safari. The page works correctly when I see it in Chrome. It is the same for my page too. I googled and tried a few workarounds provided. But haven’t found a solution yet 
Update - I tried seeing the bootstrap page (http://getbootstrap.com/examples/theme/) on Safari (on ipad) and it works fine. When I copied its code into codepen, it does not work (http://codepen.io/coderpradxj/pen/kXoWJL).
I wonder if this is a problem with codepen and not safari. Anyway, I have posted a query to codepen support. Lets see what they say.
2 Likes
Awesome – thank you for helping out with the research on this one. Anxiously awaiting their reply!!
I have the same problem on my profile page and I have been searching on StackOverflow for solutions without proper success.
My navbar-fixed-top works fine on my desktop and on my Android phone. It doesn’t work on my iPad, in portrait or landscape mode - when I scroll, the navbar moves up the screen.
Problems with navbar links covering the text - fixed as below
I had difficulties on the desktop with the links covering up the text they referred to, and I got round that by not only adding:
body { padding-top: 80px; }
but also:
margin-top: -80px; padding-top: 80px;
to the elements (sections in a container) where I had put my 'id’s that the menu bar linked to. (Actually it wasn’t quite that simple; for some reason, I had to put margin-top to -40px on the second link, and 0px on the third link.) I have no idea why I had to do this; I just used trial and error, and it worked.
I have tried adding the following CSS from suggestions on StackOverflow:
`.navbar-fixed-top {
position: fixed;
}`
and a media query for the smaller iPad screens:
@media (max-width: 979px) { .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; margin-left: 0; margin-right: 0; } }
These didn’t seem to do anything.
@pradxj07, I’m interested that you raised a question with CodePen support about whether there were some adjustments needed on CodePen because “the bootstrap page (http://getbootstrap.com/examples/theme/) on Safari (on ipad) and it works fine.” Did you get a reply?
Two other issues with this
1. ScrollSpy doesn’t work
I have implemented ScrollSpy which works fine on my desktop PC and Android phone. On the iPad, all I get is that, after a second, the highlighted link changes from the first menu link to the last one, and stays fixed there. The menu disappears as I scroll down, and is therefore of no use. I think it’s just locked on the last menu link, so ScrollSpy doesn’t work.
2. The links don’t do anything
When I press on the menu links when the menu is visible, nothing happens. The links don’t work.
I’d really value some help with getting the Bootstrap navbar and navbar-fixed-top to work on an iPad, as well as ScrollSpy. I’m sure that we aren’t the only ones to have had this problem with our profile pages.
1 Like
I have put my profile page on another server, and the navbar works fine in all the above respects on an iPad:
- The navbar-fixed-top works
- The menu links work; and
- ScrollSpy works
My conclusion is the same as @pradxj07 above, and @JacksonBates on Why navbars don’t work on mobile that CodePen affects the way navbars work on an iPad.
Until someone with more experience looks at the issue (and it may not be a priority), it’s best not to worry about how navbars appear on an iPad if you are working with CodePen. Get them working on a desktop or Android device, and that’s enough for the time being. CodePen is a great environment to work on, and it makes it easy to build webpages. If you really want to put something into production and have full functionality on an iPad, you can always put it on another server.
@cpcode, @iloanzi, Sorry, I had completely forgotten about this issue. I traced back to the support ticket I had raised. This was the reply I had got.
_
**Hi Pradnya,
Ah ok, it’s Safari on the iPad! Safari on iOS is a bit different from Safari on OSX, which is why I didn’t see the issue at first. I can see it now, and I have a workaround I can suggest 
Most of the views of a Pen are inside an iframe, and iOS Safari is a little fussy when it comes to scrolling a page within an iframe. The workaround is to test your Pen’s debug view on your iPad, instead of the editor or full page views. Here’s how to use debug view: https://blog.codepen.io/documentation/views/debug-view/**_
1 Like
Hi @pradxj07, would you have an updated link for the solution (it’s coming back with a 404 error message). Or perhaps provide other references we can go to? ^^
I’d love to know if there is a code pen fix also. I’ve spent hours trying to figure this out and finally figured out it was an iPhone issue and found this thread. I think it’s a huge deal that navbar’s do not work correctly in CodePen. VERY Frustrating for a newbie.
I just heard back from CodePen. The best I got is ‘run it in debug mode’. That is fine and well (kinda) but this is a large issue, which makes CodePen unreliable IMO to me. How can I trust that my issues are from code and not how Code Pen renders? Frustrating. Other forum threads mention that they switched to GitHub and everything works. I guess that is what I will be doing for my projects. This needs to be called out at both Code Pen and FCC.
Yup I think this is just codepen issue cos my portfolio page has a perfectly fixed bootstrap navbar no matter the device. I uploaded my page to surge sh not codepen
Hi all-
This is very helpful. I have been experiencing the same issue. Links on the nav bar are not working and my navbar-fixed-top only works on desktops and not on my iphone. I thought it could be safari, but I also tried it on Chrome. Again, and no positive outcome.