As I was revamping my portfolio website to make it more responsive, I encountered a challenge. I have a navigation menu at the top of the screen, but I wanted to position it at the bottom when viewed on a smartphone.
Typically, I would use a media query for iPhones to change the positioning from top to none and add bottom: 0 instead of top: 0 in the CSS rule for the navigation menu.
However, despite my efforts, I couldn't seem to get it to work properly.
Here is a snippet of the 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;
}
You can check out my test site where I'm working on this here.
Your assistance would be greatly appreciated. I have searched but couldn't find a solution to this issue. Thank you!