Bonjour,

Je suis face à une situation peu agréable. En effet j'utilise sur mon site un menu de navigation qui se situe dans le <header> de ma page. Le site est administré sous WordPress. Dans UN cas (seul cas de ce dysfonctionnement repéré à ce jour) le menu <nav>se retrouve centré et non sur la droite comme lors d'un fonctionnement prévu. Ce cas étant lorsque la page ne prend pas la totalité de l'écran, lorsque j'inspecte le contenu de la page pour voir les propriétés CSS appliquées à l'élément le menu se repositionne miraculeusement à droite et garde son emplacement après fermeture de la fenêtre (je pense que c'est parce que le contenu occupe toute la page lorsque la fenêtre était ouverte). Je vais essayer en fixant le menu footer au bas de page pour voir si cela fonctionne mais je ne pense pas que ce soit la bonne solution et que le problème sera toujours présent mais simplement dissimulé. J'ai remarqué cette propriété :

article, aside, footer, header, hgroup, main, nav, section {
    display: block;
} /*propriété venant de User Agent Stylesheet*/

J'ai essayer de reset le CSS mais cela ne change rien (je m'y suis peut-être mal pris) pour l'instant le seul reset est celui-ci :

/* RESET */
* {
    /*list-style-type: none; /* retire les puces des listes à puces */
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .2s ease-in;
    border: 0;
    outline: none;
}

Voici les propriétés utilisés sur le menu et le header :

/* Header */
header {
    padding-top: 1%;
    padding-bottom: 1%;
    position: sticky;
    top: 0;
    opacity: 1;
    width: 100%;
    z-index: 500;
    display: inline-block;
    box-shadow: 0px 3px 20px 0px /*#7F7F7F*/#424242;
    /*margin-bottom: 4%;*/
    }
header div{
    text-align:center;
}
header a {
    text-decoration: none;
    transition: all .2s ease-in;
}
header li a {
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
}
header ul#menu-header{
    display: flex;
    width: 70%;
    margin-left: auto;
}
width: 20px;
}
header ul{
    list-style-type: none;
}

header ul li {
    margin : auto;
    margin-right: 1%;
}
.sub-menu{
    /*display: none;*/
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s,opacity 0.3s linear;
    position: absolute;
    z-index: 500;
    width: 100%;
    min-width: 240px;
    text-align: left;
    border-radius: 3px;
    box-shadow: 0px 3px 20px 0px /*#7F7F7F*/#424242;
}
.sub-menu li{
    padding: 2%;
}
.dropdown{
    position: relative;
}
.dropdown:hover .sub-menu{
    display: block;
}

.menu-item-has-children {
    position: relative;
}

.menu-item-has-children:hover > .sub-menu{
    /*display: block;*/
    visibility: visible;
    opacity: 1;
}

.sub-menu .sub-menu {
    left : 100%;
}


.headnav{
    margin-left: auto;
    margin-top: 3%;
    width: 70%;
    ma

EDIT :

Fixer le menu le <footer> au pied de page ne change rien au problème, je n'ai vraiment aucune idée d'où cela peut venir et comment le corriger aidez moi svp

-
Edité par vernaisc 5 juin 2018 à 15:30:18

/*header ul*/#menu-header{
    display: flex;
    width: 70%;
    margin-left: auto;
    position: absolute;
    right: 0;
}

-
Edité par vernaisc 5 juin 2018 à 16:06:23