Positionnement du contenu défilable sous le menu de navigation fixe de Flexbox

15

J'ai l'extrait de code suivant (besoin de voir en mode plein écran), que j'essaie de placer l' <main>élément directement sous l' <header>élément. J'ai le <header>dans une position fixe parce que je veux qu'il reste en haut de l'écran pendant que l'utilisateur fait défiler le contenu de l' <main>élément. J'ai essayé tout ce que je sais, mais le mieux que je puisse trouver est de <header>placer l' élément au-dessus de l' <main>élément, ce qui coupe une grande partie du contenu.

La solution la plus proche possible que j'ai trouvée consiste à placer un rembourrage supérieur estimé sur l' <main>élément afin qu'il efface le <header>. Cependant, cette solution ne prend pas très bien en compte les différentes tailles d'écran, car j'utilise la taille rem au lieu de px. L'idée de rembourrage supérieur devient encore pire lorsque vous placez plusieurs éléments à l'intérieur de la <header>hauteur relative ou basée sur un pourcentage. Sur une taille d'écran, tout peut être parfait, et sur une taille d'écran différente, le contenu peut être très différent.

Enfin, je sais que je peux utiliser jQuery pour définir dynamiquement le remplissage supérieur, mais cela ne semble pas toujours bien fonctionner. Vous vous demandez s'il existe une solution css / html pure.

Quelqu'un peut-il me dire ce qui me manque ici? Ma méthode de rembourrage supérieur est-elle la seule solution viable?

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});
* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

#head-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}
#second-wrap{
    position: fixed;
    width:100%;
    z-index:999;
}
main{
  height:4000px;
  position:relative;
  padding-top:13rem;
}

header{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  height:200rem;
}

#navToggle {
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a {
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav {
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul {
  list-style-type: none;
}

#bottom-container nav>ul>li {
  position: relative;
}

#bottom-container nav>ul>li>a {
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle {
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav {
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  padding-top:5rem;
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle {
    display: none;
  }

  #bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav {
    display: block;
  }

  #bottom-container>nav>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li {
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a {
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle {
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav {
    margin-top:-194.5rem;
  }
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>

<main>
  <p>content top not visible but should be able to see</P>
  <p>line 1</P>
  <p>line 2</P>
  <p>line 3</P>
  <p>line 4</P>
  <p>line 5</P>
  <p>line 6</P>
  <p>line 7</P>
  <p>line 8</P>
  <p>line 9</P>
  <p>line 10</P>
    <p>line 11</P>
    <p>line 12</P>
    <p>line 13</P>
    <p>line 14</P>
    <p>line 15</P>
    <p>line 16</P>
    <p>line 17</P>
    <p>line 18</P>
    <p>line 19</P>
    <p>line 20</P>
</main>
</body>
</html>
Développer l'extrait

html css css-position fixed Austin
la source
en plein écran le principal déjà sous l'en-tête mais pas dans le mobile
Ayman Morsy
C'est à cause du rembourrage placé sur l' mainélément. Clunky, mais ça fonctionne. Vous vous demandez s'il existe une meilleure solution.
Austin
Je ne sais pas ce que vous voulez, c'est une photo après avoir désactivé la bordure jaune ibb.co/bR0YykQ pouvez-vous prendre une capture d'écran
Ayman Morsy
Mon exemple est une version simplifiée de ma version live. Dans ma version live, il y a plusieurs éléments flexibles dans mon <header>élément qui utilisent tous des pourcentages ou des hauteurs relatives. Cela rend <main>presque inutile l' ajout d'un coussin supérieur fixe à l' élément. L' <main>élément peut bien s'aligner sur une taille d'écran et être très éloigné sur une autre. On dirait que jQuery peut être ma seule solution ici avec une sauvegarde du pad supérieur css sur l' <main>élément.
Austin
Avez-vous essayé avec CSS position: sticky developer.mozilla.org/en-US/docs/Web/CSS/position au lieu d'utiliser JS?
Arthur

Réponses:

1

J'ai fait le même résultat (corrigez-moi, si je me trompe), mais sans js. Et il semble que la hauteur de l'en-tête soit prise en compte par le contenu ci-dessous.

L'idée principale - de ne pas envelopper <header>et de l'appliquer position: sticky, z-indexn'est pas non plus nécessaire.

Je n'ai pas utilisé exactement votre code, mais j'ai essayé de répéter le résultat. J'espère que vous trouverez quelques idées utiles pour votre problème.

Le code de certaines réponses lorsque la largeur de l'écran est petite et basculer le menu, il pousse vers le bas le contenu principal. Mon code ne contient pas ce problème.

* {
    margin: 0;
}
  
@media (min-width: 48rem) {
    :root {
        font-size: calc(1rem + ((1vw - .48rem) * 1.389));
    }
}
  
body {
    background: #eee;
    font-family: "HelveticaNeue-Light", Arial;
    height: auto !important;
 }

header {
    width: 100%;
    position: sticky;
    top: 0;
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

.wrapper {
    position: relative;
    background-color: rgba(0, 0, 0, .15);
}

#navToggle {
    display: inline-block;
    height: 2.6rem;
}

#navToggle > a {
    color: rgba(255, 255, 255, .85);
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0 2.5rem;
    text-decoration: none;
    transition: all 300ms ease;
    padding-top: .9rem;
}

#navToggle:hover + #bottom-container, #bottom-container:hover  {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
}

#bottom-container > nav  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#bottom-container > nav > ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

#bottom-container > nav > ul li {
    display: flex;
    justify-content: center;
    width: 100%;

}

#bottom-container nav > ul > li > a {
    display: block;
    color: rgba(0, 0, 0, .65);
    padding: 1.3rem 0;
    text-decoration: none;
}

.sub1 {
    position: relative;
}

.sub1 > nav {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    background-color: rgb(250, 250, 250);
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.sub1 > nav ul li {
    text-align: center;
}

.sub1 > a:hover + nav, .sub1 > a + nav:hover {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container nav>ul>li>a span.toggle {
    background-color: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .25);
    padding: 2px 8px;
}

main {
    height:4000px;
}

@media (min-width: 751px){
    #bottom-container > nav > ul {
        flex-direction: row;
        height: 3rem;
    }
    
    #bottom-container nav>ul>li>a span.toggle {
        display: none;
    }
    
    #bottom-container {
        height: 100%;
        border-top: calc(5vh + 2vw) solid yellow;
        visibility: visible;
        opacity: 1;
        position: static;
    }

    #navToggle {
        display: none;
    }
}
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>
    <header>
        <div class="wrapper">
            <div id="navToggle"><a href="#">Menu</a></div>
            <div id='bottom-container'>
                <nav>
                    <ul>
                        <li><a href="#">ITEM ONE</a></li>
                        <li class="sub1">
                            <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
                            <nav>
                                <ul>
                                    <li><a href="#">Sub Item 1</a></li>
                                    <li><a href="#">Sub Item 2</a></li>
                                    <li><a href="#">Sub Item 3</a></li>
                                    <li><a href="#">Sub Item 4</a></li>
                                </ul>
                            </nav>
                        <li><a href="#">ITEM THREE</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        
    </header>


    <main>
        <p>content top not visible but should be able to see</P>
        <p>line 1</P>
        <p>line 2</P>
        <p>line 3</P>
        <p>line 4</P>
        <p>line 5</P>
        <p>line 6</P>
        <p>line 7</P>
        <p>line 8</P>
        <p>line 9</P>
        <p>line 10</P>
        <p>line 11</P>
        <p>line 12</P>
        <p>line 13</P>
        <p>line 14</P>
        <p>line 15</P>
        <p>line 16</P>
        <p>line 17</P>
        <p>line 18</P>
        <p>line 19</P>
        <p>line 20</P>
    </main>
</body>

</html>
Développer l'extrait

Aleksandr Belugin
la source
Sur les petits écrans, lorsque l'en-tête est gris, le contenu principal défile devant l'en-tête.
thingEvery
@thingEvery c'est à cause du canal alpha en couleur de fond: rgba (0, 0, 0, .15); J'ai pris la couleur du code de l'auteur
Aleksandr Belugin
4

Veuillez supprimer les deux premiers conteneurs div supérieurs de l'élément d'en-tête car il n'est pas nécessaire d'envelopper l'en-tête. l'élément d'en-tête est déjà conteneur.

Veuillez supprimer height:200rem;dans le style d'en-tête et padding-top: 13rem or 5rempour le style de l'élément principal.

Enfin, veuillez mettre à jour la propriété de position du style d'en-tête à sticky au lieu de absoluteet ajouter z-index.

Ci-dessous, je l'ai testé et mis à jour la base de code.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});
* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

main{
  height:4000px;
  position:relative;
}

header{
  position: sticky;
  z-index: 100;
  top:0;
  left:0;
  width:100%;
}

#navToggle {
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a {
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav {
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul {
  list-style-type: none;
}

#bottom-container nav>ul>li {
  position: relative;
}

#bottom-container nav>ul>li>a {
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle {
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav {
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /* remove padding top */
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle {
    display: none;
  }

  #bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav {
    display: block;
  }

  #bottom-container>nav>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li {
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a {
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle {
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav {
    margin-top:-194.5rem;
  }
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

  <header>
    <div id="navToggle"><a href="#">Menu</a></div>
    <div id='bottom-container'>
      <nav>
        <ul>
          <li><a href="#">ITEM ONE</a></li>
          <li class="sub1">
            <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
          <nav>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
              <li><a href="#">Sub Item 4</a></li>
            </ul>
          </nav>
          <li><a href="#">ITEM THREE</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <p>content top not visible but should be able to see</P>
    <p>line 1</P>
    <p>line 2</P>
    <p>line 3</P>
    <p>line 4</P>
    <p>line 5</P>
    <p>line 6</P>
    <p>line 7</P>
    <p>line 8</P>
    <p>line 9</P>
    <p>line 10</P>
      <p>line 11</P>
      <p>line 12</P>
      <p>line 13</P>
      <p>line 14</P>
      <p>line 15</P>
      <p>line 16</P>
      <p>line 17</P>
      <p>line 18</P>
      <p>line 19</P>
      <p>line 20</P>
  </main>
</body>
</html>
 Run code snippet
Développer l'extrait

Monter
la source
Sur les petits écrans, lorsque l'en-tête est gris, le contenu principal défile devant l'en-tête.
thingEvery
Parce qu'il y avait une opacité d'arrière-plan définie dans l'élément navToggle de l'en-tête. Pour le corriger, vous pouvez simplement supprimer cette opacité.
Lever le
4

C'est en quelque sorte un hack grossier, mais vous pouvez créer un deuxième en-tête qui se cache derrière le vrai qui reste dans le flux de documents et pousse vers le bas <main>.

Dupliquez simplement les éléments qui composent l'en-tête, donnez-leur une valeur inférieure z-indexet passez-la de position: fixedà position: relative. Ensuite , il suffit de se débarrasser de la hauteur du caché <header>élément et retirez le padding-topde <main>.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});
* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

#head-wrap,
#hidden-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}
#hidden-wrap header {
  height: inherit;
  position: relative;
}
#second-wrap{
    position: fixed;
    width:100%;
    z-index:999;
}
#second-wrap2{
    position: relative;
    width:100%;
    z-index:998;
}

main{
  height:4000px;
  position:relative;
  /* padding-top:13rem; */
}

header{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  height:200rem;
}

#navToggle,
#navToggle2{
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a,
#navToggle2>a{
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container,
#bottom-container2{
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav,
#bottom-container2>nav{
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul,
#bottom-container2 nav>ul{
  list-style-type: none;
}

#bottom-container nav>ul>li,
#bottom-container2 nav>ul>li{
  position: relative;
}

#bottom-container nav>ul>li>a,
#bottom-container2 nav>ul>li>a{
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle,
#bottom-container2 nav>ul>li>a span.toggle{
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav,
#bottom-container2>nav>ul>li>nav{
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /*padding-top:5rem;*/
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle,
  #navToggle2{
    display: none;
  }

  #bottom-container,
  #bottom-container2{
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav,
  #bottom-container2>nav{
    display: block;
  }

  #bottom-container>nav>ul,
  #bottom-container2>nav>ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li,
  #bottom-container2 nav>ul>li{
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a,
  #bottom-container2 nav>ul>li>a{
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle,
  #bottom-container2 nav>ul>li>a span.toggle{
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li,
  #bottom-container2 >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav,
  #bottom-container2>nav>ul>li>nav{
    margin-top:-194.5rem;
  }
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>
<div id="hidden-wrap">
  <div id="second-wrap2">
    <header>
      <div id="navToggle2"><a href="#">Menu</a></div>
      <div id='bottom-container2'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>

<main>
  <p>now you can see this text</p>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
  <p>line 4</p>
  <p>line 5</p>
  <p>line 6</p>
  <p>line 7</p>
  <p>line 8</p>
  <p>line 9</p>
  <p>line 10</p>
    <p>line 11</p>
    <p>line 12</p>
    <p>line 13</p>
    <p>line 14</p>
    <p>line 15</p>
    <p>line 16</p>
    <p>line 17</p>
    <p>line 18</p>
    <p>line 19</p>
    <p>line 20</p>
</main>
</body>
</html>
Développer l'extrait

Edit: je ne sais pas pourquoi je n'y avais pas pensé avant. Il suffit de régler #headwrapet <main>de position: relative. Ensuite, retirez le heighton <main>et réglez <body>sur display: flexet flex-direction: column. Enfin, enveloppez le contenu de <main>a <div>.

Ici, j'ai défini la hauteur du div à 4000px pour illustrer le défilement.

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
      if(window.innerWidth >= "751") {
          $("header > div#bottom-container > nav").show();
      }else {
          $("header > div#bottom-container > nav").hide();
      }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
     if (window.innerWidth <= "750") {
       if ($(this).siblings().size() > 0) {
         e.preventDefault();
         $(this).siblings().slideToggle("slow");
      }
    }
  });

   $("header > div#bottom-container > nav > ul > li").hover(function() {
        if (window.innerWidth >= "751") {
          if ($(this).children("nav").size() > 0) {
            $(this).children("nav").stop().show();
         }
       }
     },function(){
       if (window.innerWidth >= "751") {
         if ($(this).children("nav").size() > 0) {
           $(this).children("nav").hide();
        }
      }
  });
});
* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#head-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}

#second-wrap{
    position: relative;
    width:100%;
    z-index:999;
}

main{
  /*height:4000px;*/
  position:relative;
  overflow: auto;
  /* padding-top:13rem; */
}

main>div {
  height: 4000px;
}

header{
  position: relative;
  top:0;
  left:0;
  width:100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*height:200rem;*/
}

#navToggle{
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a{
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top:.9rem;
}

#bottom-container{
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav{
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul{
  list-style-type: none;
}

#bottom-container nav>ul>li{
  position: relative;
}

#bottom-container nav>ul>li>a{
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle{
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav{
  display: none;
  overflow: hidden;
  position: absolute;
  top:100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom:10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}

/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   THIS IS THE ONLY FIX I KNOW OF  //////////
*/
main{
  /*padding-top:5rem;*/
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* Medium screens */
@media all and (min-width: 751px) {
  header{
    overflow-y:visible;
    overflow-x:visible;
    padding-bottom:0;
  }

  #navToggle{
    display: none;
  }

  #bottom-container{
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav{
    display: block;
  }

  #bottom-container>nav>ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li{
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a{
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle{
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav{
    margin-top:-194.5rem;
  }
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
  <div id="second-wrap">
    <header>
      <div id="navToggle"><a href="#">Menu</a></div>
      <div id='bottom-container'>
        <nav>
          <ul>
            <li><a href="#">ITEM ONE</a></li>
            <li class="sub1">
              <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
            <nav>
              <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
              </ul>
            </nav>
            <li><a href="#">ITEM THREE</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>


<main>
  <div>
  <p>now you can see this text</p>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
  <p>line 4</p>
  <p>line 5</p>
  <p>line 6</p>
  <p>line 7</p>
  <p>line 8</p>
  <p>line 9</p>
  <p>line 10</p>
    <p>line 11</p>
    <p>line 12</p>
    <p>line 13</p>
    <p>line 14</p>
    <p>line 15</p>
    <p>line 16</p>
    <p>line 17</p>
    <p>line 18</p>
    <p>line 19</p>
    <p>line 20</p>
    </div>
</main>
</body>
</html>
Développer l'extrait

chose
la source
Merci pour la solution créative, mais cela ressemble à du code que Google n'aimerait pas beaucoup. Contenu de niveau de navigation dupliqué et masqué. J'espérais vraiment qu'il y avait une astuce de positionnement que je ne connaissais tout simplement pas, mais je commence à réaliser qu'une solution jQuery est la meilleure façon de résoudre ce problème. Je vais laisser la prime ouverte, juste pour voir s'il y a une autre solution disponible. Si personne d'autre ne se présente, je marquerai votre réponse comme correcte.
Austin
@Austin Ouais cool. Je suis intéressé à voir d'autres solutions aussi.
thingEvery
@Austin J'ai mis à jour ma réponse avec une bien meilleure solution.
thingEvery
0

Une solution simple, j'utilisé paddingdans %plutôt que remoupx

$(document).ready(function() {
  $('#navToggle').click(function() {
    $("div#bottom-container > nav").slideToggle();
  });

  $(window).resize(function() {
    if (window.innerWidth >= "751") {
      $("header > div#bottom-container > nav").show();
    } else {
      $("header > div#bottom-container > nav").hide();
    }
  });

  $("header > div#bottom-container > nav > ul > li > a").click(function(e) {
    if (window.innerWidth <= "750") {
      if ($(this).siblings().size() > 0) {
        e.preventDefault();
        $(this).siblings().slideToggle("slow");
      }
    }
  });

  $("header > div#bottom-container > nav > ul > li").hover(function() {
    if (window.innerWidth >= "751") {
      if ($(this).children("nav").size() > 0) {
        $(this).children("nav").stop().show();
      }
    }
  }, function() {
    if (window.innerWidth >= "751") {
      if ($(this).children("nav").size() > 0) {
        $(this).children("nav").hide();
      }
    }
  });
});
* {
  margin: 0;
}

@media (min-width: 48rem) {
   :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}

#head-wrap {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#second-wrap {
  position: fixed;
  width: 100%;
  z-index: 999;
}

main {
  height: 4000px;
  position: relative;
  padding-top: 13rem;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 200rem;
}

#navToggle {
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index: 999;
  height: 2.6rem;
}

#navToggle>a {
  color: rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top: .9rem;
}

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav {
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul {
  list-style-type: none;
}

#bottom-container nav>ul>li {
  position: relative;
}

#bottom-container nav>ul>li>a {
  display: block;
  color: rgba(0, 0, 0, .65);
  padding: 1.3rem 0;
  text-decoration: none;
}

#bottom-container nav>ul>li>a span.toggle {
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .25);
  padding: 2px 8px;
}

#bottom-container>nav>ul>li>nav {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 100%;
  right: 5%;
  width: 90%;
  z-index: 100;
  background-color: rgb(250, 250, 250);
  margin-bottom: 10rem;
}

header>nav>ul>li>nav>ul>li>a {
  color: rgba(255, 255, 255, .85);
}


/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   Use padding in %  //////////
*/

main {
  padding-top: 11%;
}

@media (max-width:1200px) {
  main {
  padding-top: 12.5%;
}
}

@media (max-width:1023px) {
 main {
  padding-top: 14.5%;
}
}

@media (max-width:767px) {
  main {
  padding-top: 8%;
}
}


/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/


/* Medium screens */

@media all and (min-width: 751px) {
  header {
    overflow-y: visible;
    overflow-x: visible;
    padding-bottom: 0;
  }
  #navToggle {
    display: none;
  }
  #bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }
  #bottom-container>nav {
    display: block;
  }
  #bottom-container>nav>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }
  #bottom-container nav>ul>li {
    position: static;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #bottom-container nav>ul>li>a {
    padding: 0;
  }
  #bottom-container nav>ul>li>a span.toggle {
    display: none;
  }
  #bottom-container>nav>ul>li>nav>ul>li {
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav {
    margin-top: -194.5rem;
  }
}
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div id="head-wrap">
    <div id="second-wrap">
      <header>
        <div id="navToggle"><a href="#">Menu</a></div>
        <div id='bottom-container'>
          <nav>
            <ul>
              <li><a href="#">ITEM ONE</a></li>
              <li class="sub1">
                <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
                <nav>
                  <ul>
                    <li><a href="#">Sub Item 1</a></li>
                    <li><a href="#">Sub Item 2</a></li>
                    <li><a href="#">Sub Item 3</a></li>
                    <li><a href="#">Sub Item 4</a></li>
                  </ul>
                </nav>
                <li><a href="#">ITEM THREE</a></li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  </div>

  <main>
    <p>content top not visible but should be able to see</P>
    <p>line 1</P>
    <p>line 2</P>
    <p>line 3</P>
    <p>line 4</P>
    <p>line 5</P>
    <p>line 6</P>
    <p>line 7</P>
    <p>line 8</P>
    <p>line 9</P>
    <p>line 10</P>
    <p>line 11</P>
    <p>line 12</P>
    <p>line 13</P>
    <p>line 14</P>
    <p>line 15</P>
    <p>line 16</P>
    <p>line 17</P>
    <p>line 18</P>
    <p>line 19</P>
    <p>line 20</P>
  </main>
</body>

</html>
Développer l'extrait

Awais
la source
Si la fenêtre mesure environ 900 pixels de large, la ligne supérieure est toujours coupée.
thingEvery
@thingEvery Mis à jour mes ans en utilisant media-quiresmal parviennent à ajuster le rembourrage maintenant son bon fonctionnement s'il vous plaît vérifier et faites-le moi savoir
Awais
C'est mieux, mais certains textes sont toujours coupés entre 751px et 767px. De plus, OP a déclaré: "L'idée de remplissage supérieur devient encore pire lorsque vous placez plusieurs éléments à l'intérieur de <header> qui utilisent une hauteur relative ou basée sur un pourcentage." Je choisirais probablement la route jQuery, mais en dehors de cela, créer un tas de requêtes multimédias est probablement sa seule véritable option - tant que les éléments de son en-tête ne changeront pas.
thingEvery
1
Je viens de créer les requêtes qui étaient principalement utilisées par appareil, il peut le changer en conséquence ou utiliser une autre requête entre 700 et 767. n seconde, je suis d'accord avec vous, en général l'en-tête doit être de hauteur fixe et en raison de laquelle nous avons eu tellement d'options pour corriger correctement la position du contenu sinon Jquery est la seule option à jouer avec comme vous le mentionnez ......
Awais
0

ne cherchez-vous pas la position: collante; en haut: 0; ? Vous voulez avoir un menu qui suit l'utilisateur quand il défile à droite? Essayez ensuite de remplacer # bottom-container par:

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
  position: sticky;
  top: 0;
  z-index: 1; 
}

Et je pense que c'est tout. Mais l'un est sûr - vous devez repenser la façon dont vous avez créé toute cette structure car c'est désordonné. Vous pouvez obtenir les mêmes résultats avec:

html:

<header>
    <nav id="mobileMenu"><a href="#">Menu</a></nav>
    <nav id='menu'>
      <div class="menuItem">
        <a href="#">ITEM ONE</a>
      </div>
      <div class="bigMenuItem">
        HOVER ME
        <div class="menuItemsCon">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </div>
      <label class="bigMenuItem" for="inputClick">
        CLICK ME
        <input type="checkbox" name="input" id="inputClick" style="display:none;">
        <div class="menuItemsCon click">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </label>
    </nav>
  </header>

  <main>
    <p>content top not visible but should be able to see</P>
    <p>line 1</P>
    <p>line 2</P>
    <p>line 3</P>
    <p>line 4</P>
    <p>line 5</P>
    <p>line 6</P>
    <p>line 7</P>
    <p>line 8</P>
    <p>line 9</P>
    <p>line 10</P>
  </main>

style.css:

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}
main{
  height:100vh;
  position:relative;
}

/*Changed classes*/

header{
  position: sticky;
  top:0;
  z-index: 1;
}

a{
  display: block;
  color: rgba(0, 0, 0, .65);
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#mobileMenu{
  display: none;
  background-color: rgba(0, 0, 0, .15);
  height: 2.6rem
}

#mobileMenu a{
  color:rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top: .9rem;
}

#menu{
  background-color: rgb(250, 209, 14);
  border-top: calc(5vh + 2vw) solid yellow;
  display: flex;
  z-index: 999;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

@media only screen and (max-width:751px) {
  #mobileMenu{
    display: block;
  }
  #menu{
    display: none;
  }
}

#menu > .menuItem, #menu > .bigMenuItem{
  width: calc(100%/3);
  height: 3rem;
  text-align: center;
  line-height: 3rem;
}

#menu > .bigMenuItem{
  position: relative;
  cursor: pointer;
}

#menu > .bigMenuItem .menuItemsCon{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
  opacity: 0;
  position: relative;
  top: -100vh;
  transition: all .5s;
}


#menu > .bigMenuItem .menuItemsCon > .menuItem{
  height: 3rem;
  background-color: #FFF;
}

/* and if you want to click for submenu to show*/
#menu  .bigMenuItem input:checked + .menuItemsCon, #menu  .bigMenuItem:hover .menuItemsCon:not(.click){
  opacity: 1;
  top: 0;
}

Et pas de JS cuz si vous n'êtes pas obligé de ne pas l'utiliser. J'espère que ça aide.

Mortimer
la source
0

Je peux vous proposer un Vanilla-JavaScript au lieu de jQuery…

Essayez d'obtenir la taille de "header" lors du chargement de la page (événement onload) et ajoutez-la au remplissage de "main":

window.addEventListener("load", function(e){
  my_main.style.paddingTop = my_header.clientHeight + "px";
}, 1);

pour travailler, j'ai donné un "id" à la "tête" et aux éléments "principaux":

<header id="my_header"> <main id="my_main">

window.addEventListener("load", function(e){
  my_main.style.paddingTop = my_header.clientHeight + "px";
}, 1);
* {
    margin: 0;
}
  
@media (min-width: 48rem) {
    :root {
        font-size: calc(1rem + ((1vw - .48rem) * 1.389));
    }
}
  
body {
    background: #eee;
    font-family: "HelveticaNeue-Light", Arial;
    height: auto !important;
 }

header {
    width: 100%;
    position: sticky;
    top: 0;
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

.wrapper {
    position: relative;
    background-color: rgba(0, 0, 0, .15);
}

#navToggle {
    display: inline-block;
    height: 2.6rem;
}

#navToggle > a {
    color: rgba(255, 255, 255, .85);
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0 2.5rem;
    text-decoration: none;
    transition: all 300ms ease;
    padding-top: .9rem;
}

#navToggle:hover + #bottom-container, #bottom-container:hover  {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
}

#bottom-container > nav  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#bottom-container > nav > ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

#bottom-container > nav > ul li {
    display: flex;
    justify-content: center;
    width: 100%;

}

#bottom-container nav > ul > li > a {
    display: block;
    color: rgba(0, 0, 0, .65);
    padding: 1.3rem 0;
    text-decoration: none;
}

.sub1 {
    position: relative;
}

.sub1 > nav {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    background-color: rgb(250, 250, 250);
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.sub1 > nav ul li {
    text-align: center;
}

.sub1 > a:hover + nav, .sub1 > a + nav:hover {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container nav>ul>li>a span.toggle {
    background-color: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .25);
    padding: 2px 8px;
}

main {
    height:4000px;
}

@media (min-width: 751px){
    #bottom-container > nav > ul {
        flex-direction: row;
        height: 3rem;
    }
    
    #bottom-container nav>ul>li>a span.toggle {
        display: none;
    }
    
    #bottom-container {
        height: 100%;
        border-top: calc(5vh + 2vw) solid yellow;
        visibility: visible;
        opacity: 1;
        position: static;
    }

    #navToggle {
        display: none;
    }
}
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>
    <header id="my_header">
        <div class="wrapper">
            <div id="navToggle"><a href="#">Menu</a></div>
            <div id='bottom-container'>
                <nav>
                    <ul>
                        <li><a href="#">ITEM ONE</a></li>
                        <li class="sub1">
                            <a href="#">ITEM TWO <span class="toggle">Expand</span></a>
                            <nav>
                                <ul>
                                    <li><a href="#">Sub Item 1</a></li>
                                    <li><a href="#">Sub Item 2</a></li>
                                    <li><a href="#">Sub Item 3</a></li>
                                    <li><a href="#">Sub Item 4</a></li>
                                </ul>
                            </nav>
                        <li><a href="#">ITEM THREE</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        
    </header>


    <main id="my_main">
        <p>content top not visible but should be able to see</P>
        <p>line 1</P>
        <p>line 2</P>
        <p>line 3</P>
        <p>line 4</P>
        <p>line 5</P>
        <p>line 6</P>
        <p>line 7</P>
        <p>line 8</P>
        <p>line 9</P>
        <p>line 10</P>
        <p>line 11</P>
        <p>line 12</P>
        <p>line 13</P>
        <p>line 14</P>
        <p>line 15</P>
        <p>line 16</P>
        <p>line 17</P>
        <p>line 18</P>
        <p>line 19</P>
        <p>line 20</P>
    </main>
</body>

</html>
Développer l'extrait

Federico
la source