css affichant le contenu au-dessus de l'en-tête fixe

Question

Comment puis-je afficher du contenu au-dessus de mon en-tête fixe? Je veux simplement créer un «en-tête externe» au-dessus de mon en-tête de navigation principal qui affiche quelques liens vers des sites sociaux.

J'ai créé le balisage HTML mais je ne peux pas le traduire visuellement en utilisant CSS.

Ci-dessous le code - ou consultez ce codepen.

Essentiellement, je veux le social ul with list items 1,2,3 & 4 d'être au-dessus du nav global

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
    <nav> 
 
     <ul class="social"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
    <div class="logo"> 
 
     <a href=""> 
 
     <!--<img src="images/rare-logo.png">--> 
 
     <h1>Rare Select</h1> 
 
     </a> 
 
    </div> 
 
    <nav class="menu"> 
 
     <ul> 
 
     <li><a href="">HOME</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 1

Votre tête utilise une position fixed donc je vous conseille de déplacer l'en-tête vers le bas égal à sa hauteur (à condition que la hauteur ne change pas) EG 80px dans ce cas.

.header { 
    top: 80px; 
} 

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 80px; 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
    <nav> 
 
     <ul class="social"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
    <div class="logo"> 
 
     <a href=""> 
 
     <!--<img src="images/rare-logo.png">--> 
 
     <h1>Rare Select</h1> 
 
     </a> 
 
    </div> 
 
    <nav class="menu"> 
 
     <ul> 
 
     <li><a href="">HOME</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 2

Si vous voulez que les deux menus restent fixes, je vous suggère de les envelopper les deux dans un nouveau conteneur (dans l'extrait ci-dessous j'ai donné cette classe wrapper).

Ajoutez plutôt la propriété position à cette classe.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div class="wrapper"> 
 
    <div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
     <nav> 
 
     <ul class="social"> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
      <li>4</li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
    <div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
     <div class="logo"> 
 
     <a href=""> 
 
      <!--<img src="images/rare-logo.png">--> 
 
      <h1>Rare Select</h1> 
 
     </a> 
 
     </div> 
 
     <nav class="menu"> 
 
     <ul> 
 
      <li><a href="">HOME</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</div>