NavBar Issues - Hover and Spacing

Question

I currently have 2 issues with the navbar I'm working on. The first issue is regarding the hover feature on navbar links.My intention is to have an underline appear in the color purple (#9908ff) when a user hovers over the links in the navbar. However, the hover code in the CSS is not functioning as expected.

The second issue is regarding the alignment of the 3 sections in the navbar. I have the logo on the left, navbar links in the middle and buttons on the right. The challenge arises when I attempt to add space between the two buttons on the right, aiming for a more balanced spacing between the sections. Currently, the buttons on the right appear very cramped together. How can I resolve this issue?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/css/test.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fake News and Critical Thinking</title>

    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/952dcc46a8.js" crossorigin="anonymous"></script>

    <!-- google font import; montserrat -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- google font import; gabarito -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>

<body>
    <!-- header -->
    <header>
        <div class="nav-container">

        <img src="/img/IV-3.png" alt="logo" class="logo">
        
        <nav>
            <ul class="nav-links">
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">Current Affairs</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Entertainment</a></li>
            </ul>
        </nav>

        <div class ="nav-btns">
            <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
            <a href="#"><i class="fa-sharp fa-solid fa-bars"></i></a>
        </div>
        
        </div>
    </header>
</body>
</html>

CSS:

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

header {
    width: 100%;
    margin-top: 20px;
    background: #0b0e16;
}

.logo {
    width: 200px;
    cursor: pointer;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

a {
    font-family: 'Gabarito', cursive;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-links {
    list-style: none;
    display: flex;
    
}

.nav-links li {
    display: inline-block;
    margin: 20px;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #ece0ff;
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
    content: "";
    width: 100%;
    height: 4px;
    background: #9908ff;
    position: absolute;
    bottom: -4px;
    left: 0px;
}

Thanks in advance

Please try this code and let me know if it resolves your issues .nav-btns { width: 60px; } .nav-links li a:hover { border-bottom: 1px solid #9908ff; } — Ashish
– Ashish, Commented Oct 3, 2023 at 3:39
Yes, it worked. Thanks a ton! The only issue left is nav buttons. The spacing between the two buttons is still an issue. They look cramped but moved 60px left from page margin. @Ashish — Tammy
– Tammy, Commented Oct 3, 2023 at 3:53
For spacing between the nav buttons you can use: .nav-btns a { text-indent: 11px; } .nav-btns { width: 70px; } — Ashish
– Ashish, Commented Oct 3, 2023 at 3:57
It worked as well. Tysm! Also, I tried making the indent bigger than 11 px and that pushes it more towards the page margin. Is there a way to avoid that? @Ashish — Tammy
– Tammy, Commented Oct 3, 2023 at 4:03
If you increase the width it will help you maintain the space between the nav links and page margin like: .nav-btns { width: 91px; } — Ashish
– Ashish, Commented Oct 3, 2023 at 4:09

Ashish · Accepted Answer · 2023-10-03 06:36:37Z

0

For spacing between the nav buttons you can use:

.nav-btns a { text-indent: 11px; } .nav-btns { width: 70px; }

For underline menus on hover you can use:

.nav-links li a:hover { border-bottom: 1px solid #9908ff; }

answered Oct 3, 2023 at 6:36

Ashish

1822 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NavBar Issues - Hover and Spacing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related