Partage
  • Partager sur Facebook
  • Partager sur Twitter

Navbar position fixed change le div suivant

    21 septembre 2021 à 14:35:13

    Bonjour à toutes et à tous,
    Auriez vous une piste concernant un changement d'affichage lorsque la navbar est en position fixed ?

    Le site est pas en ligne donc compliqué de vous montrer.

    Il y a une navbar avec le css suivant
    .site-header {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      align-items: center;
      position: fixed;
      // margin: 0 auto 2.427rem;
      background-color: beige;
      z-index: 3;
      max-width: 100%;
      width: 1200px;
    
    Ensuite il y a un autre div avec une image (juste un bout du code pour pas faire trop lourd)
    <div className="home-wrapper">
          <div className="home-section">
            <img src="/assets/images/home_background.jpg" alt="home background" className="home-background-img" />
            <div className="home-slogan">
    home-wrapper {
      overflow: hidden;
      .home-background-img {
        width: 100%;
        object-fit: cover;
      }
    
    .home-section {
        position: relative;

    Si je mets donc la navbar en fixed (parce que j'aimerais qu'elle reste affichée tout le temps) ça bouge mon image dans le home-wrapper et lorsque ça passe en "mobile" c'est une catastrophe graphique.

    Auriez vous une idée ?

    Merci beaucoup pour votre aide;

    Je vous souhaite une bonne journée.

    Suite des fouilles ;)

    En fouillant je me rends compte que l'image qui doit être après le header est en dessous.
    Je réduis en largeur le header pour vous ce qui se passait en dessous.

    Bon j'ai le problème mais pas la solution.

    Comment puis je faire pour que l'image soit après la barre de menu et pas en dessous ?

    Merci d'avance pour vos aides.

    Bonne journée.

    -
    Edité par Wagscd 21 septembre 2021 à 15:18:22

    • Partager sur Facebook
    • Partager sur Twitter
      21 septembre 2021 à 19:11:24

      Salut, il faut pour cela utiliser sticky aulieu de fixed:

      Regarde les vidéos ci-dessous ca pourrait t'aider:

      Les positions en CSS:

      https://youtu.be/jGtp9KjSO2c

      Tuto de A à Z pour faire un site responsive avec navBar

      https://www.youtube.com/watch?v=rx1AQV8_ROI&list=PLn0WRmKoGQMPNijmdEaQTTBlgN0no9mxN

      • Partager sur Facebook
      • Partager sur Twitter

      La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

        22 septembre 2021 à 5:24:44

        Bonjour NadfriJS,
        Je te remercie pour ta réponse et pour les liens.
        En utilisant padding, j'ai résolu le problème mais je ne sais pas si c'est correct.
        En utilisant sticky, ça faisait le même problème.

        Je vais regarder les liens que tu me conseilles, ça m'apportera très certainement des réponses ;)
        Merci beaucoup.
        Bonne journée.
        • Partager sur Facebook
        • Partager sur Twitter

        Navbar position fixed change le div suivant

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown