Navigation Disappearing in Chrome after scrolling

Question

I am working on a small website for an Android App I'm releasing, but I have a small problem that I can't seem to find the answer to.

In Firefox, everything works properly but when you scroll and then click on a nav link (simply using an id to move down the page) but on Chrome, the navigation disappears until you scroll some more.

The website is up at www.ioudebtcalculator.com

These are the only styles I have applied:

#navBar {
    background-color:#000;
    position:fixed;
    width:100%;
    font-family:sans-serif;
    font-weight:bold;
    font-size:13pt;
    height:70px;
}

Edit: I have since removed the position fixed from the navBar on the website so you will no longer see the problem there. The problem has not yet been solved.

You can easily add position fixed to the navBar element using Developer Tools or any other equivalent tool to see the problem.

Answer 1

I have no clue what's going wrong. But I'm going to throw out my best guess since nobody's answered yet.

The following looks like a good candidate for screwy behavior:

function switchTabs(e) {
    $('a#currentTab').removeAttr('id');
    $(e).children('a').attr('id','currentTab');
} 

id is a property not an attribute, and adding and removing ids seems like a really bad idea because that's how elements in the DOM are uniquely identified. That's something I wouldn't mess around with. Plus it's easy to recreate the desired functionality with classes:

function switchTabs(e) {
    $('a.currentTab').removeClass('currentTab');
    $(e).children('a').addClass('currentTab');
} 

Maybe I got lucky?

Answer 2

It might be benefitial to use a scroll:

This will make it more userfriendly because it's gracefull and the problem (I imagine) is in the fact that Chrome doesn't register the position change because of the current method.

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });

Answer 3

Please replace your css using below code

    nav {
        background: none repeat scroll 0 0 #000000;
        display: block;
        position: absolute;
        margin-left: 115px !important;
        float: left;
        height: 70px;
        margin-left: 10%;
        width: 40%;
    }

Answer 4

I just added two things both in Chrome and Firefox and it was working well. I clicked the link and scrolled a bit too, the nav stays as its expected.

For #navBar
position: fixed;

For #wrapper
padding-top: 70px;

Answer 5

You should add top: 0 to your element. That will align it to the top of the page no matter what. You may need to add padding to the top of the content wrapper so that it is never covered by the nav.

Answer 6

it works for me when adding this to your navbar css

-webkit-transform: translateZ(0);

making it

#navBar {
    background-color: #000;
    width: 100%;
    position: fixed;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14pt;
    height: 70px;
    -webkit-transform: translateZ(0);
    z-index: 1;
    box-shadow: 0 2.5px 20px #000;
}