- This topic has 0 replies, 1 voice, and was last updated 6 years, 5 months ago by .
- You must be logged in to reply to this topic.
Home › Forums › Scotts World Forum › CSS › Side Nav absolute v Static
Tagged: css, position: absolute v Static
I read this article and thought maybe static would help with what I am trying to do with my html pages side navigation. I got the Navigation link to stay put but the links do not stay with it, especially a problem if you have scrolled down a long page and click in Navigation you can not see the links because they scrolled up with the page. Static worked locally but when I opened it at work it had pushed the content below the side nav which is longer than what you see at the top of the page..
Element positioning
This is the code for the css for my side nav.
/* Begin side nav */
.sidenav {
height: 100%;
width: 0;
position: absolute ;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
display: block;
transition: 0.3s;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 16px;}
margin: auto !important;
#container {
width: 100%;
padding: 0px;
border: 0px none transparent;
margin-left: auto;
margin-right: auto;
}
}
/* end side nav */
We use cookies to improve your experience on our site. By using our site, you consent to cookies.
Manage your cookie preferences below:
Essential cookies enable basic functions and are necessary for the proper function of the website.
These cookies are needed for adding comments on this website.
Google reCAPTCHA helps protect websites from spam and abuse by verifying user interactions through challenges.
These cookies are used for managing login functionality on this website.
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Service URL: policies.google.com (opens in a new window)