CODEWITHSUNDEEP
htmlcsshyperlink
Pierre
Pierre

Reputation: 25

Internal links doesn't work when I change their color



I need you help
I have a strange error on my code.

The issue is that the internal links to "home" and the one to "footer" doesn't work, whereas the others work fine.
But when I delete the color: #ffffff from .menu a in the css, then they all work.
I don't see how I can solve this issue
Does anyone has an idea ? 

html {
  scroll-behavior: smooth;
}

body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*menu fixe*/
.menu{
	position: fixed;
	left: 0;
	bottom:60vh;
	z-index: 10;
}

.menu ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu li{
	padding: 10px;
}

.menu a{
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px;
	color: #ffffff;
}

.menu a:hover{
	background-color: black;
}

/*main content*/
.wrapper{
	width: 60%;
	margin: 0 auto;
}

/*header*/
.header{
	width: 100%;
	height: 100vh;
	top: 0;
	background-color: #D4726A;
	position: sticky;
	z-index: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

/*boxes-all*/
.box-container {
	height: 100vh;
	width: 100%;
}
.box-header{
	height: 40vh;
	width: 100vw;
	position: sticky;
	top: 1px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: lightblue;
}

.box-content{
	height: 60vh;
	width: 100%;
	text-align: center;
	background-color: grey;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

/*boxes-each*/

.box-header-first{
	background-color: #447684;
}
.box-content-first{
	background-color: #0F414F;
}

.box-header-second{
	background-color: #51A35F;
}
.box-content-second{
	background-color: #10621E;
}

.box-header-third{
	background-color: #67989A;
}
.box-content-third{
	background-color: #0D4A4D;
}

/*footer*/
.footer{
	height: 100vh;
	width: 100%;
	margin: 0;
	bottom:0;
	position: sticky;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	z-index: -2;
	background-color: #D4A06A;
}
<!DOCTYPE html>
<html lang="fr">
    <head>
    <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>titre</title>
        <link rel="stylesheet" type="text/css" href="sticky.css">
    </head>

    <body>
   
    <div class="body">
 <!-- menu fixe -->
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#boxone">box one</a></li>
                <li><a href="#boxtwo">box two</a></li>
                <li><a href="#boxthree">box three</a></li>
                <li><a href="#footer">footer</a></li>
            </ul> 
        </nav>
    </div>

 <!-- contenu -->
    <div class="container">
       
    <!-- main content -->
        <div class="sticky">

        <!-- header -->
            <div class="header" id="home">
                <div class="wrapper">
                    <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
            </div>

        <!-- boxes -->
            <div class="box-container" id="boxone">
                <div class="box-header box-header-first">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
                <div class="box-content box-content-first">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

            <div class="box-container" id="boxtwo"> 
                <div class="box-header box-header-second">
                    <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
                <div class="box-content box-content-second">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

            <div class="box-container" id="boxthree">
                <div class="box-header box-header-third">
                    <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div> 
                <div class="box-content box-content-third">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

        </div>

    <!-- footer -->
        <div class="footer" id="footer">
            <div class="wrapper">
                <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
            </div> 
        </div>

    </div>

    </div>

    </body>
</html>

Thank you :)

Upvotes: 0

Views: 35

Answers (1)

Sanu
Sanu

Reputation: 330

This is a very simple issue,

Please remove

top: 0;

property from your .header class.

and :

bottom: 0;

property from your .footer class, too.

or copy paste this style instead of your .header syle

/*header*/
.header{
    width: 100%;
    height: 100vh;
    background-color: #D4726A;
    position: sticky;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

Upvotes: 1

Related Questions