theodore theodore - 6 months ago 36
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>




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: