Barre de navigation fixée masque les ancres

**RowanMayfair** · 10/05/2020, 12h40

Bonjour,

J'ai donc une barre de navigation en haut, fixe.
Pour accéder à mes différentes sections, pas de soucis, grâce à data-offset :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body data-spy="scroll" data-target=".navbar" data-offset="100">
        <nav class='navbar navbar-default navbar-fixed-top'>
            <div class='container'>
                <div class='navbar-header'>
                    <button type='button' class='navbar-toggle' data-toggle='collapse'
                        data-target='#myNavbar'>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                    </button>
                </div>
                <div class='collapse navbar-collapse' id='myNavbar'>
                    <ul class='nav navbar-nav'>
                        <li><a href="#about">Accueil</a></li>
                        <li><a href="#skills">Compétences</a></li>
                        <li><a href="#experience">Expérience</a></li>
                        <li><a href="#education">Formation</a></li>
                        <li><a href="#portfolio">Projets / Travaux pratiques</a></li>
                        <li><a href="#veille">Veille</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>                
            </div>           
        </nav>

ça, ça fonctionne très très bien.

Mais, dans ma section "compétences", j'ai des div avec des liens : ces liens renvoient beaucoup plus bas dans la page, vers le TP concerné :
Un exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-sm-4">
                        <div class='lang_'>
                            <div class="titre">
                                <img src='images/logo blanc/logo_c.png' alt="logo c# blanc">
                                <p>C#<span class="glyphicon glyphicon-chevron-down"></span></p>                                
                            </div>
                            <div class="corps">                               
                                <ul>
                                    <li class="head_skills">Avec Visual Studio : </li>
                                    <li><a href="#dvd">Gestion Dvd</a></li>
                                    <li><a href="#contacts">Gestion des contacts</a></li>
                                    <li><a href="#pendu">Jeu de Pendu</a></li>
                                    <li><a href="#mastermind">Mastermind</a></li>
                                    <li><a href="#morpion">Morpion</a></li>                               
                                </ul>                           
                            </div>
                        </div>
                    </div>

Sauf que là bien sûr, c'est tout moche, c'est à dire que le haut du TP concerné est masqué par la barre
Nom : Capture.PNG
Affichages : 1068
Taille : 24,4 Ko