Bonjour, j'ai fait une sidebar en HTML CSS comme header mais lorsque je l'inclu dans les autres pages le texte se met dessus. j'ai tous essayer et je ne trouve pas de solutions. De plus je souhaiterai que mon block de texte se déplace lorsque je déploie mon sidebar. je voudrais aussi que ma sidebar se referme lorsque je click sur une zone neutre (j'ai utiliser du Js pour la déployé donc j'imagine qu'il y a une fonction JS pour rentrer la sidebar
merci d'avance pour votre aide.

voici ci-joint mon code

voici mon header
[
Code HTML:
<doctype html>
<html>
<head>
****<link rel="stylesheet" type="text/css" href="./css/header.css">
****<script src="https://use.fontawesome.com/698969780e.js"></script>**
*
</head>
*
*
<body>
*
****<div class="menu">
*
********<ul>
************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Home</a></li>
************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Users</a>
****************<ul>
********************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-plus"></span>ADD</a></li>
********************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Edit</a></li>
********************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Delete</a></li>
*
****************</ul>
************</li>
************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-edit"></span>Web Design</a></li>
************<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Contact</a></li>
********</ul>
*
********<div id="sidebar-btn">
************<span></span>
************<span></span>
************<span></span>
********</div>
****</div>
*
****<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
****<script>
********$(document).ready(function(){
************$('#sidebar-btn').click(function() {
****************$('.menu').toggleClass('visible');
************});
********});
****</script>
</body>
*
</html>
le CSS de mon header
Code:
.body{
    padding: 0;
    margin: 0;
 
 
}
.menu{
    background-color: #34495E;
    width: 200px;
    height: 100%;
    display: block;
    position: absolute;
    left: -210px;
    top: 0px;
    transition: left 0.3s linear;
}
 
.menu.visible{
    left: 0px;
    transition: left 0.3s linear;
}
 
#sidebar-btn{
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 15px;
    cursor: pointer;
    margin: 20px;
    position: absolute;
    top:0px;
    right:-70px;
}
 
#sidebar-btn span{
    height: 1px;
    background: #111;
    margin-bottom: 5px;
    display: block;
 
 
}
 
.menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
 
}
 
.menu ul li{
 
    padding: 15px;
    position: relative;
    width: 170px;
    vertical-align: middle;
    background-color: #34495E;
    cursor: pointer;
    border-top: 1px solid #BDC3C7;
    border-right: 5px solid #F1C40F;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
 
.menu ul ul{
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    border-left: 5px solid #F1C40F;
    visibility: hidden;
    left: 100%;
    top: -2%;
 
}
 
.menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
     
}
 
.menu ul li a{
    color: #fff;
    text-decoration: none;
}
 
span {
    margin-right: 15px;
 
}
 
.menu ul li:hover{
    background-color: #2ECC71
}
la page index dans laquelle le header est inclus

Code HTML:
<?php
 
include 'include/header.php';
 
?>
 
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
    <title>Accueil</title>
</head>
<body>
 
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum lacus rutrum, euismod mi non, vehicula urna. Fusce ultrices nisl eu magna ornare, posuere tincidunt erat rhoncus. Pellentesque sagittis enim sed tortor ultrices, congue tempor est hendrerit. Mauris convallis varius nisl et bibendum. Duis sodales ultricies libero, vel porta est tristique at. Sed nec ipsum luctus, pharetra turpis nec, fringilla augue. Maecenas rutrum dui nec mi cursus dignissim. Vestibulum venenatis dignissim orci vitae suscipit. Nam sit amet sapien ac diam venenatis imperdiet at dapibus orci. Duis viverra, sapien ac semper tincidunt, lectus libero facilisis enim, sit amet placerat mauris eros id augue.</p>
 
    
</body>
</html>
merci d'avance pour votre aide