Avoir une barre de navigation fixe et une image en bannière

[LucieD]

Bonjour,
J'ai choisi le thème "Hibou aquarelle" ModernBB, et donc j'ai une image en bannière que j'aimerais conserver. J'ai aussi une barre de navigation qui, pour le moment n'est pas fixe.
J'aimerais que les deux apparaissent en même temps et soient fixes. Or quand je fixe la barre de navigation, ça fait disparaître l'image de bannière.
http://transitionapt.forumactif.com/
Une idée?
Merci

[*Splash*]

Hi,
Tu peux tenter ce code CSS :

Code:

/*positionnement barre de navigation*/
ul.navbar.navlinks {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#logo {
  margin-top: 60px;
}

[LucieD]

Ça n'a pas fonctionné. La barre de navigation s'est retrouvée coupée en deux dans le sens de la longueur et les deux ne peuvent toujours pas s'afficher ensemble.

[LucieD]

Je ne pense pas que le problème de disparition soit lié à la superposition de la barre et du logo parce que si je descends beaucoup le logo sur la page (donc ils sont très loins de se superposés) l'image disparaît encore en scrollant.

[*Splash*]

Hi,
Est-ce que ce code fonctionne ?

Code:

.navbar {
    text-align: center;
    background-color: #000;
    box-shadow: 0 0 3px rgba(0,0,0,0.9);
    height: auto;
    left: 0;
    padding: 6px 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000!important;
}
 
.navbar li {
    margin:0px!important;
 }

[LucieD]

C'est presque bon ! La barre de navigation est fixe, et apparaît avec le logo en haut de page. Il y a juste qu'en scrollant le logo disparaît toujours. Déjà merci beaucoup

[*Splash*]

Tu peux essayer ce code pour ton image du header :

Code:

/* image header */
.headerbar {
        background-image: url("url de l'image");
        background-attachment: fixed;
        background-size: 100%;
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0;
        overflow: hidden;
        margin: 0;
        height: 350px;
        position: relative;
        background-color: #1D262C;
}

[LucieD]

Le logo est dédoublé. Le nouveau est plus bas caché par le contenu du forum, mais lui n'a pas le souci de disparition.
Le logo d'origine disparaît toujours.

[*Splash*]

Il faut que tu supprimes l'URL de l'image enregistrée dans le PA dans la partie gestion des images
Cette image sera renseignée par le code CSS

[LucieD]

J'ai paramétré comme ça est c'est bon !

/* image header */
.headerbar {
background-image: url("https://2img.net/image.noelshack.com/fichiers/2019/15/1/1554716168-i-logo-1.png");
background-attachment: fixed;
background-size: 75%;
width: 100%;
background-position: top;
background-repeat: no-repeat;
padding: 0;
overflow: hidden;
margin: 0;
height: 350px;
position: relative;
background-color: transparent;
}

Merci beaucoup de ton aide !