Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I am trying to make the anchor tag of my navbar :hover fill the whole color of the hovered navigator. only the size of the text is changing the color but not the whole one like in this example:
https://personal-portfolio.freecodecamp.rocks/

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arams Portfolio</title>
    <link rel="stylesheet" href="./styles.css" />
    </head>
    
    <body>
        <nav id="navbar">
            <ul>
                <li><a href="#welcome-section">Welcome</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <main class="sections">
            <section id="welcome-section">
                <h1>Hey I am Aram</h1>
            </section>
            <section id="projects">
                <h2 class="project-title">Projects</h2>
            </section>
            <section id="contact">
                <h2>Contact</h2>
            </section>
            <footer></footer>
        </main>
    </body>
</html>

/* file: styles.css */
:root {
    --text: rgb(65, 65, 65);
    --navbar: rgb(217, 255, 0);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--text);
    width: 100%;
}

#navbar {
    width: 100%;
    height: 50px;
    background: linear-gradient(120deg, var(--navbar) 70%, var(--text));
    border-bottom: 2px solid rgba(0, 0, 0, 0.192);
}

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

#navbar ul li {
    margin: 1rem 2rem;
    list-style: none;
}

#navbar ul li a:hover {
    background-color: aquamarine;
}

#navbar ul li a {
    text-decoration: none;
    color: var(--text);
}

.sections {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

#welcome-section {
    background-color: aliceblue;
}

#projects {
    background-color: antiquewhite;
}

#contact {
    background-color: aqua;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

You need to give your links some padding like this. You can play around with the pixel number, but adding the padding will give you what you want

#navbar ul li a {
    text-decoration: none;
    color: var(--text);
  padding: 20px;
}
1 Like
3

Change the ‘padding’ property for a elements like this:

#navbar ul li a:hover {
  background-color: aquamarine;
}

#navbar ul li a {
    text-decoration: none;
    color: var(--text);
    padding: 20px 10px;
}
2 Likes
4

thanks to both of you. have a beautiful night

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.