theodore theodore - 16 days ago 5
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



<html>
<style>

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


li {
float: left;
height:75px;
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;
}
</style>e>


</style>
<head>
<title> E-Benta </title>

<ul>
<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>
</ul>
</head>
<spacer>testing </spacer>

</body>

</html>




Answer

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: http://codepen.io/Dzongkha/pen/PbbvLZ

Comments