Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points
Posted by Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points

Position: fixed; CSS bug in Chrome and Firefox for android

Hi Everyone,

I've been working on a responsive website that implements a common mobile navigation design convention: using position:fixed; to overlay a nav bar on top of the document so that the content scrolls beneath it.

So far it works great in every single mobile browser in iOS (chrome and safari). However when I tested the site on my Android Nexus 4 device (I tested the website in both Chrome and firefox) the navigation bar displays some weird behavior. When I scroll the navigation stays fixed but does not shift upward as the browser's address bar disappears. Rather it waits for you to stop touching/scrolling and then it awkwardly snaps the navigation to its right position. This bug is more prominent in Chrome. I'm so confused as to why this is happening.

Since I had recently developed a website with the Twitter Bootstrap nav bar component, I checked it on my Android device to see if perhaps it was a recent browser bug, but no. The bootstrap fixed nav bars work great still. It must be some line of code I'm including or omitting that is causing this buggy behavior. Here is my code which was authored in Sass (hence the nested media query). 

//The nav begins fixed at the bottom of the viewport and then for smaller screens it gets shifted to top of the viewport
.nav  {
    width: 100%;
    z-index: 100;
    position: fixed;
    bottom: 0;
    background-color: #000;
    max-height: 50px;
    overflow: hidden;

         @media (max-width: 1100px) {
        position: fixed; 
        top: 0;
        left: 0;
        right: 0;
    }
}

Maybe CSS guru Guil Hernandez could help me out here? Thanks!

Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points
Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points

UPDATE: I coded a dummy page with a fixed nav bar and some lorem ipsum text and the nav bar shows no bugs this time. So now I know I AM the cause of the bug. Now I just need to figure out what's wrong with the code I've written. Any insights would help.

2 Answers

Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points
Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points

UPDATE: Bug fixed! Turns out the broswers were getting confused with the media query switch from bottom:0 position on larger displays to suddenly having to honor top: 0 AND bottom:0 on mobile in smaller screen widths. I fixed it with the following code. I took a mobile first approach to this which worked wonderfully

.nav {

        width: 100%;
    z-index: 100;
    position: fixed;
    top: inherit; //this non numerical offset value positions the nav bar up top by default;
         @media (min-width: 1100px) {
             bottom: 0; // then this rule comes in at larger widths and overrides whatever the nav inheriting 

     }

}