My CSS:
html,body {margin:0;
overflow: hidden;
background: #3D537C;
font-family: 'Montserrat', sans-serif;
padding-top: 47px;
}
.navbar {
// overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
/*Just Sidebar*/
.sidebar {
position: fixed;
width: 200px;
height: auto;
margin: 50px auto;
background: #3D537C;
}
.content {
margin-left: 200px;
height: 2500px;
width: auto;
background: #AFCBFF;
overflow: auto;
top: -10px;
z-index: 2;
padding-top: 40px;
margin-top: -40px;
}
/*.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}*/
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
}
My HTML:
<body>
<div class="navbar">
<a href="#About">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="sidebar"> <a href="#About">About</a>
<a href="#random">Random</a>
</div>
<div class="content">
<div id="About">
<p>Hier wird was über mich stehen</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p></div>
<div id="random"> Hier wird irgendwas kommen
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
When clicking on the Sidebar/Navigationbar anchor link the Text is being blocked by my fixed Navigation Bar. Whatever I tried, i can't find a solution and i'm not really that good in CSS.
PS: Just plain CSS please, no JS/JQuery
Fiddle: https://jsfiddle.net/ent848pf/
Add this in your css . Hope this helps you.
#About, #random{
padding-top: 100px;
}