Menu de navigation fixe

Bonjour à tous!

Je souhaiterais avoir un menu fixe comme sur ce site : https://www.greenpeace.fr/

je n'arrive pas à comprendre ce qu'il manque à mon code, mes deux problèmes sont :
-que mon menu passe en dessous du texte
-l'en tête de mon menu disparaît, ce qui fait que les images du début sont cachés

Merci par avance pour votre aide

		<header>	
		<div class="navbar">
			<div> <a href="accueil.html"> <img id="haut" src="images/tortue.jpg" alt="logo_tortue" class="logo"> </a> </div>  

			<div> <a class="logo_nom" href="accueil.html"> La tortue </a> </div>  

			<nav class="nav">

    			<ul>	

    				<li> <a href="qui_sommes_nous.html" class="titre"> Qui sommes nous ? </a> </li>

					<li> <a href="champs_d'action.html"> Nos champs d'action </a> </li>

					<li> <a href="agir.html"> Agir </a> </li>

					<li> <a href="contact.html"> Contact </a> </li>

					<li> <a href="FAQ.html"> FAQ </a> </li>

					<li id="faire_un_don"> <a href="faire_un_don.html" title="c'est grâce à vous que nous pouvons agir" target="_blank"> Faire un don </a> </li>


  				</ul>

			</nav>		
		</div>
		</header>


		<main  id="conteneur">

			<div class="element">

				<img src="images/climat.jpg" alt="climat" class="climat_img" >

				<div class="img_accueil">			

					<h2> Climat : un pas en avant </h2>

						<p> Samedi dernier, la « marche du siècle » a tenu sa promesse. Ralliement historique face au péril climatique, plus de 350 000 personnes ont manifesté dans les rues de 220 villes de France…  </p>

				</div>

			</div>

			

			<div class="element">

					<img src="images/WAFG.jpg" alt="WAFG" class="WAFH_img" > 

				<div class="img_accueil">			

					<h2> WE ACT FOR GOOD ! </h2>

						<p> WAG est la plateforme digitale où les gestes de chacun se transforment en action collective. Avec WAG, si on change tou·te·s un peu, ça change tout ! </p>

				</div>

			</div>

		

			<div class="element">

					<img src="images/baleine.jpg" alt="baleine" class="baleine_img" > 

				<div class="img_accueil">			

					<h2> En immersion avec les baleines </h2>

						<p> Découvrez le 3ème épisode de WWT Immersion 360 au cœur du Sanctuaire Pelagos, au plus près des baleines de la Méditerranée. </p>

				</div>

			</div>

			

			

			<div class="element">

					<img src="images/plastique.jpg" alt="plastique" class="plastique_img" > 

				<div class="img_accueil">			

					<h2> La nature sans plastiques </h2>

						<p> Chaque année, 8 millions de tonnes de plastiques finissent dans nos océans. Disons STOP à cette catastrophe et œuvreront pour la propreté des oceans. </p>

				</div>

			</div>		

		</main>

		

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; 
  top: 0; 
  width: 100%; 
}


.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.navbar a:hover {
  background: #ddd;
  color: black;
}

Modifié par alex9869 (14 Apr 2019 - 13:20)

j'ai trouve la solution au premier problème avec z-index.

Cependant il reste toujours le problème de l'en tête.
Modifié par alex9869 (14 Apr 2019 - 13:30)

Salut,
As-tu un code plus complet (idéalement à mettre sur codepen.io) ? Ou mieux encor, le site en lui-même ?
Parce que pour le moment j’ai de la peine à comprendre en quoi consiste le problème et quel est le rendu voulu.