theodore theodore - 1 year ago 80
CSS Question

HTML content beneath the fixed navigation

how do i put my content just beneath my navigation. Every time i put some text inside the it just goes behind the green background and gets covered up by the navigation. Please kindly help me how to put my text beneath the navigation


ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;

li {
float: left;
border-right: 5px solid red;
li:last-child {
border-right: none;
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;

li a:hover:not(.active) {
background-color: yellow;

.active {
background-color: #4CAF50;

<title> E-Benta </title>

<li><a href="Home.html"> <img src="logo.png"> </img> </a>
<li><a href ="Home.html">Home </a></li>
<li><a href ="Products.html">Products </a>
<li><a href ="about.html">About us </a>
<li><a href ="contact.html">Contact us </a>
<spacer>testing </spacer>



Answer Source

If you add to your this code:

spacer {
    display: block;
    margin-top: 75px;

Everything will be ok. Just add margin-top bigger than height of fixed menu.

Check snippet here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download