Technical_Documentation_Page - navbar issue

Hi friends. I have finished my technical documentation page and I am facing an issue with the navigation bar. The navbar is working fine on desktop, but when I am viewing the page on my mobile device none of the buttons seems to work. When I click on any of the navbar buttons nothing happens instead of redirecting me in the corresponding section of the page. Does anyone know or have any suggestions how to fix this?

Here is the link of the page:

Hey

I’ve tried it on my phone and it appears to work exactly the same as on desktop. Click/press the nav item and the page scrolls to the corresponding section.

Hope that helps :slight_smile:

Really? I am using safari browser on iphone 6s and does not seem to work when I click/press the navbar items. Which browser are you using?

Hey, my phone is a Samsung s6, android 7.0, using chrome.

I’ve also just checked it on my phone with some other browsers: Firefox, Samsung browser and Opera Touch and it works the same on all of them.

Hope that helps :slight_smile:

Might be an ios issue? Found these, might be worth reading/exploring?
https://blog.codepen.io/2017/12/01/stupid-iframes-stupid-ios/

1 Like

I’ve tested it on chrome and the issue still remains. The only solution I found was to double click any navbar button and then select the option to open it in a new tab. Then everything appears to work as it should. Probably it is an iOS issue. Anyway thanks a lot for the help and the feedback really appreciate it! :grinning:

1 Like

Remember that the test function doesn’t work properly with anything but Chrome and Safari works horribly with Codepen, I find. Probably because most stuff made with codepen and FCC hasn’t been optimised for other browsers.

For example, in your transition styling you need add this for it to work with webkit (ie Safari):

-webkit-transition:background-color .3s;

Which may explain the issue you’re having.

1 Like

Also, you haven’t fully closed your media query at the end - needs a final } and you have too much blank space on the right because of the narrow margin you’ve set in your media query. Try it with 70% instead of 60%.

1 Like

Hey, thanks for the info about the transition, I’ve checked it but unfortunately does not seem to change anything. Also could you tell me exactly which margin are you reffering to in the media query so I can clear the blank space on the right?

Sure.

It’s here:

  #main-doc{
    text-align:left;
    margin-left:0px;
    width:80%;
    padding: 6px;
    position: relative;
    left:10em;
    margin-top:0px;
    font-size: 10px;;
  }

80% works well, but you’ll have to tweak your code box CSS also to make it fit nicely (just checked, you can set this back to 100% and it fits nicely).

2 Likes

Yep just fixed it! Thank you for helping :heart: