menu fixe page non entiere

Sujet résolu

2 octobre 2024 à 16:13:34

Bonjour à tous,

Je n'ai pas trouvé de titre assez explicite en quelques mots, alors je vais vous expliquer mon problème.

J'ai fais un menu fixe en haut de page qui lorsqu' on scroll ou qu'on clique sur un lien restera en haut de page pour toujours y avoir accès.

Un probleme se pose:

- lorsque l'on clique sur un lien, ca descend bien a l'endroit voulu, mais le menu cache le début de la partie du site qui doit apparaitre.

J'espère que c'est assez clair comme explication.

Je vous laisse mes codes

<body>
    <header>
        
        <div class="logo"><a href="#logo"> <span>C</span>**** <span>I</span>********</a></div>
        <ul class="menu">
            <a href="#*****">V*****</a>
            <a href="#services">Soins</a>
            <a href="#contact">FAQ</a>
            <a href="#contact">Contact</a>
            <a href="#ou">Nous trouver</a>
        </ul>
   
    </header>

    <!-- home -->

    <section class="home" id="logo">

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family :'Poppins', sans-serif;
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}
header {
    position: sticky;
    top: 0;
    background-color: #fff;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 15%;
}

header .logo {
    font-size: 25px;
    color: #858585;
}
header .logo a {
    color: #858585;
    text-decoration: none;
}
header .logo span {
    color: #52ccba;
}
header .menu a {
    position: relative;
    margin: 0 10px;
    text-decoration: 0;
    color: #858585;
    transition: 0.5s;
}
header .menu a:before {
    position: absolute;
    top: -2px;
    content: "";
    width: 0;
    height: 2px;
    background-color: #52ccba;
    transition: 0.5s;
}
header .menu a:hover:before {
    width: 100%;
}
header .menu a:hover {
    color: #52ccba;
}
/* home */

.home {
    height: calc(100vh - 55px);
    background: url("images/main.jpg");
    background-position: center;
    background-size:cover;
    opacity: .8;
    display: flex;
    align-items: flex-end;
    padding-left: 5%;
    padding-bottom: 50px;
    justify-content: space-between;
}

Merci par avance du temps que vous prendrez pour m'aider

-
Edité par cro_mag 2 octobre 2024 à 16:23:36

Lamecarlate

2 octobre 2024 à 19:48:14

Bonjour,

déjà, pas besoin de tout ce que tu mets dans *, border-box suffit, toutes les autres lignes tu les veux probablement dans body (les margin et padding à 0 c'est sortir le bazooka pour atteindre une mouche, fais au cas par cas, il y a trop peu d'éléments qui nativement ont une marge)

Ce que tu cherches c'est probablement quelque chose comme ça :

:target {
  scroll-margin-block: 5ex;
}

Tu mets la valeur que tu veux (ici c'est 5 fois la largeur d'un x, parce que c'est l'exemple que j'ai trouvé mais tu fais selon ton besoin).

Un peu de lecture : scroll-margin-block sur MDN.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

cro_mag

2 octobre 2024 à 20:43:49

Hello Lamecarte,

Merci pour ta réponse.

J'ai regardé le lien que tu m'as donné, et j'ai testé avec dans *{}

scroll-margin-top: 4em;

et ca marche

c'est bien comme ca ou ca se fait pas ?

Lamecarlate

2 octobre 2024 à 21:48:09

Non, pour moi c'est uniquement sur la pseudo-classe :target que tu devrais le mettre. Évite de mettre des choses sur * (à part border-box, qui est pertinent), ça peut vraiment être un gouffre de performances.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

cro_mag

3 octobre 2024 à 17:35:31

C'est noté, merci pour ton aide 😉

AbcAbc6

3 octobre 2024 à 18:17:50

Bonjour, passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

La balise <ul> comme <ol> n'accepte que l'élément <li> comme enfant direct. Soit vous placez vos liens dans des listes item (<li>) soit vous supprimez la balise <ul>.

Un navigation se place dans la balise de navigation => <nav>.

Je vous propose de remplacer la balise de liste incorrect par un balise de navigation.

<nav class="menu">

-
Edité par AbcAbc6 3 octobre 2024 à 18:18:31

cro_mag

6 octobre 2024 à 20:45:35

Bonjour AbcAbc6,

Merci pour le site de validation et le petit cours sur les balises nv li et ul