ImYourBabe
New Member
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 \[code\]fixed\[/code\] 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 \[code\]bottom: 0;\[/code\] and \[code\]left: 0;\[/code\] instead of \[code\]top: 0;\[/code\] and \[code\]left: 0;\[/code\].Oddly enough I can't seem to get it to work correctly.Below is my CSS:\[code\] /* 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;}\[/code\]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!