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

NadfriJS

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

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

Wagscd

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.