Hi aelynne,
Thanks for the example.
It does spring up more questions than it solves I’m afraid.
If we add content to your demo your navbar sits on top of the content and then scrolls up the screen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin:0;
height:100%;
background-color:#F69220;
font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
}
#box0 {
position:absolute;
z-index:0;
width:100%;
height:100%;
background-image:url(images/about_bg.png);
background-size:100% 100%;
box-shadow:0px 0px 0px rgba(0,0,0,1.0), inset 0px 0px 0px rgba(0,0,0,1.0);
}
.wrapper { width: 100%; }
#nav {
position:absolute;
z-index:3;
width:100%;
padding:0;
margin:0;
border-top:0px solid rgb(0,0,0);
border-bottom:0px solid rgb(0,0,0);
list-style-type:none;
text-align:center;
background-color:#ffffff;
box-shadow:0 0 5px rgba(0,0,0,0.5);
inset 0 0 0px rgba(0,0,0,0.8);
animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards;
-webkit-animation-delay:0s;
-webkit-animation-duration:1s;
-webkit-animation-name:slideDown;
-webkit-animation-fill-mode:forwards;
}
#nav li {
display:inline;
margin:0 20px;
}
#nav a {
color:rgb(0,0,0);
text-transform:uppercase;
text-decoration:none;
color:#E34927;
font-weight:bold;
font-size:14px;
}
#nav li.navlogo img {
padding-bottom: 0px;
vertical-align:middle;
}
#about_title {
z-index:1;
position:absolute;
bottom: 75%;
left: 20%;
}
#about_text {
z-index:2;
position:absolute;
top:28%;
left:20%;
text-align:justify;
word-wrap:break-word;
width: 60%;
line-height: 24px;
font-family:Helvetica;
font-size: 1em;
}
@keyframes slideDown { from {
bottom:0%;
}
to { bottom:15%; }
}
@-webkit-keyframes slideDown { from {
bottom:0%;
}
to { bottom:15%; }
}
@keyframes show { from {
opacity:0
}
to { opacity:1; }
}
@-webkit-keyframes show { from {
opacity:0
}
to { opacity:1; }
}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<ul id="nav">
<li class="navlogo"><a href="index.html"><img src="http://placehold.it/30x92" width="30" height="92"></a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="property_development.html">PROPERTY DEVELOPMENT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</body>
</html>
That’s not usable in any real sense.
Do you have a link with real content in your page or can you tell me what is going to be above this navbar? In essence you can’t place the navbar absolutely at the bottom of the window and not have it scroll away with content or sit on top of content. I need to see the wider picture of your intended use.
If you want a footer after the content then don’t absolutely place it there but let it just follow in the flow of the page as per normal.
For mobile sites you can offer alternative styles via media queries and basically restyle the nav to look better on smaller screens. You will need the viewport meta tag added to stop mobiles form scaling the page though.
If you want the footer at the bottom of the window on a fixed position then you would need position:fixed instead of absolute and then possibly remove the fixed positioning for mobiles as they don’t like fixed positioning much and it usually takes up to much real estate on a small display anyway.
Therefore I can’t really give more specific help until we tie all these things together. You may already know all these things anyway but it’s difficult fo me to gauge how much you know about RWD without a more complete example or at least a good indication of what you have in mid to follow:)