HREF链接位置不佳

时间:2019-10-15 21:46:59

标签: html css bootstrap-4

我的问题很简单,但我不知道该如何解决。所以,当我单击链接(href =“ home”)进入主页部分时,它就在这里,但顶部(标题)有点。

我的问题可能来自标题,因为它的位置固定在顶部。所以我认为,当我进入本节时,他在我的栏目中隐藏了上半部分。

<header id="header" class="row">
                <!-- HEADER TITRE LOGO DESCRIPTION -->
                <div id="titre" class="col-lg-4 col-md-12">
                    <h1>L'Hair Du Temps</h1>
                    <h2>Institut de Beauté et d'esthétique Casablanca</h2>
                </div>
                <!-- HEADER TITRE LOGO DESCRIPTION -->

                <!-- MENU NAVBAR BOOTSTRAP -->   
                <div id="menu" class="col-lg-8 col-md-12">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon">--</span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarNav">
                                <ul class="navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#accueil">Accueil</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#galerie">Galerie</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#packs">Packs</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#contact">Contact</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#membres">Membres</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
                <!-- MENU NAVBAR BOOTSTRAP -->

                <!-- TRAIT DE SEPARATION ENTRE LE HEADER ET LE CONTENU -->
                <div id="separation" class="col-lg-12">

                </div>
                <!-- TRAIT DE SEPARATION ENTRE LE HEADER ET LE CONTENU -->
            </header>
/* **************** HEADER **************** */

header {
    z-index: 50;
    margin-bottom: 100px;
    background-color: #D9D9D9;
    position: fixed;
    top: 0;
    width: 100%;
}

/* Titre + Description */

#titre {
    padding: 10px;
    color: #FFFFFF /*#FFEE00*/;
    text-align: center;
}

#titre h1 {
    font-family: nomSalon, Arial, Helvetica, sans-serif;
}

#titre h2 {
    font-family: descriptionSalon, Arial, Helvetica, sans-serif;
    font-size: 20px;
}

/* Menu & Navbar */

#menu li {
    text-align: center;
    width: 100px;
    margin-right: 30px;
    margin-top: 40px;
}

#menu li a {
    color: #FFFFFF;
    background-color: #565656;
    padding: 10px;
    font-size: 15px;
    font-family: edmondRegulier, Arial, Helvetica, sans-serif;
}

#menu li a:hover {
    background-color: #FFFFFF;
    color: #565656;
}

/* Séparation Trait*/

#separation {
    width: 100%;
    height: 3px;
    background-color: #565656;
}

/* **************** HEADER **************** */

这也是我的标头,也是我的css标头。 谢谢您的帮助!

0 个答案:

没有答案