Search code examples
htmlcssgoogle-chromegithubsafari

Github io webpage no longer working on safari, however working on chrome

I previously coded a github webpage that worked perfectly fine around 2 months ago on all browsers. For some reason, I have just noticed that my navigation bar no longer works on safari, yet works on chrome. The actual links are still working, however my navigation bar buttons do not work. It's very weird as under the 'project' page of my website, the buttons for code and source links work perfectly fine. Any help and assistance would be greatly appreciated.

This is the format of my navigation bar:

        <header class="header">
            <a href="#" class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <nav class="navbar">
                <ul class="nav-area">
                    <li><a href = "index.html">Home</a></li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <li><a href = "portfolio.html" >Portfolio</a></li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <li><a href = "project.html"class="active">Project</a></li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <li><a href = "x.github.io">Github</a></li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <li><a href = "https://rapidcharts.io/datascience">Course</a></li>
                </ul>
            </nav>

The relevant github page is https://github.com/jameseconnolly/jameseconnolly.github.io. I suspect that the issue is not related to my css files, as the css code for the navigation bar buttons and code link buttons are identical. I noticed that the nav bar doesn't work either in mobile mode, so it may be an issue within html relating to the actual links, or link embedding method.

Solution

  • By looking on your code in project just see, that transform-style: preserve-3d; style on body element just do navigation unavailable:

    0

    You can remove it or add to your menu transform: translateZ(0) that do it available to use.

    header {
  transform: translateZ(0);
}