How do I make my links in the navigation bar work properly?-CodePudding

Looked up hover effects on navigation bars on YouTube and copied the code but when I try to click the elements on the navigation bar, it won't work. The cursor also doesn't change. It looks and operates just like another text.

This is the video I used: https://www.youtube.com/watch?v=1wfeqDyMUx4

Is there something wrong with my code?

@import url('https://fonts.googleapis.com/css2?family=Fjalla One&family=Work Sans:wght@400;500;700&display=swap');* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo
{
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

header ul li {
    list-style: none;
    margin-left: 20px;
   
}
header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: white;
    border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
    background: white;
    color: #2b1055;
}
section {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top,#e4989e,transparent);
    z-index: 1290;
}
#text {
    font-family: 'Fjalla One', sans-serif;
    mix-blend-mode: screen;
    position: absolute;
    color: white;
    white-space: nowrap;
    text-align: center;
    font-size: 7.5.vw;
    font-size: 4em;
    z-index: 9;
}
#btn {
    text-decoration: none;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 40px;
    background: white;
    color: #2b1055;
    font-size: 1.5em;
    transform: translateY(100px);
}
.sec {
    position: relative;
    padding: 100px;
    background: #e4989e;
}
.sec h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: white;
    font-weight: 700;
}
p #text1 {
    color: #fff;
    font-weight: 400;
    font-size: 1.5em;
}

<!doctype HTML>
<html>
    <head>
        <title>Comfort Crate</title>
        <link rel="stylesheet" type="text/css" href="styles1.css">
    </head>
    <body>
        <header>
            <a href="#" ><img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;"></a>
            <ul>
                <li><a href="#" >Home</a></li>
                <li><a href="comfortcrate.html">About</a></li>
                <li><a href="#">Creations</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section>
            <h2 id="text">WELCOME TO COMFORT CRATE!</h2>
            <a href="bplanroot.html" id="btn">Click Here</a>
        </section>
        <div >
            <h2>About us</h2>
            <p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.  
            <br><br></p>
        </div>
    </body>
</html>

CodePudding user response：

It's because section tag fills the whole page and the header stucks under it. So your mouse always hovers on section. You can see that by adding z-index: 9999; to header.

CodePudding user response：

when using position: absolute, your header element will share the space with its other siblings like normally it would. I would suggest that you add margin top to the section element to that it would get out of the way of the header.

@import url('https://fonts.googleapis.com/css2?family=Fjalla One&family=Work Sans:wght@400;500;700&display=swap');* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo
{
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

header ul li {
    list-style: none;
    margin-left: 20px;
   
}
header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: white;
    border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
    background: white;
    color: #2b1055;
}
section {
    margin-top: 100px;
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 50px 100px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top,#e4989e,transparent);
    z-index: 1290;
}
#text {
    font-family: 'Fjalla One', sans-serif;
    mix-blend-mode: screen;
    position: absolute;
    color: white;
    white-space: nowrap;
    text-align: center;
    font-size: 7.5.vw;
    font-size: 4em;
    z-index: 9;
}
#btn {
    text-decoration: none;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 40px;
    background: white;
    color: #2b1055;
    font-size: 1.5em;
    transform: translateY(100px);
}
.sec {
    position: relative;
    padding: 100px;
    background: #e4989e;
}
.sec h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: white;
    font-weight: 700;
}
p #text1 {
    color: #fff;
    font-weight: 400;
    font-size: 1.5em;
}

<!doctype HTML>
<html>
    <head>
        <title>Comfort Crate</title>
        <link rel="stylesheet" type="text/css" href="styles1.css">
    </head>
    <body>
        <header>
            <a href="#" ><img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;"></a>
            <ul>
                <li><a href="#" >Home</a></li>
                <li><a href="comfortcrate.html">About</a></li>
                <li><a href="#">Creations</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section>
            <h2 id="text">WELCOME TO COMFORT CRATE!</h2>
            <a href="bplanroot.html" id="btn">Click Here</a>
        </section>
        <div >
            <h2>About us</h2>
            <p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.  
            <br><br></p>
        </div>
    </body>
</html>