Responsive website: move header nav from top to bottom problems

Question

While rebuilding the portfolio website I was making to be more responsive-oriented, I stumbled across a problem. You see, I have a navigation menu at the top of the screen, but I want to place that navigation at the bottom of the screen when it's viewed on a smartphone.

Normally, since it's a header with a nav element in it that's fixed to the top left corner of the screen, I'd just give it a rule in my media query for (in this case) iPhones.

I'd change the top to top:none; (which I don't think is valid anyhow) and add a bottom: 0; so the rule for the navigation menu would become bottom: 0; and left: 0; instead of top: 0; and left: 0;.

Oddly enough I can't seem to get it to work correctly.

Below is my CSS:

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}

header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
}

header nav {
    width:90%;
    margin:0;
    height:80px;
}

You can also view the test site I'm building this on here: my test portfolio.

I'd appreciate your help. I bet this has been asked before, but I really can't find it on here... Thanks in advance!

Answer 1

Once your css is applied for @media screen it will carry on and apply the @media all as well. I think this is causing the problem. So I added css for top of the header and margin on the body, and that seemed to do the job.

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}

header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
    top: initial;
}

header nav {
    width:90%;
    margin:0;
    height:80px;
}
body {
    margin:0 0 100px 0;
}