The hover effect is not working in my code. Can someone help?When I run this code there is navbar present but is not clickable whereas the empty space on it's left side is clickable nor are my css hover effect working on it.


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root {
    /* global variables */
    --main-color: #ff702a;
    --text-color: #fff;
    --background-color: #1e1c2a;
    --big-font: 5rem;
    --h2-font: 2.25rem;
    --p-font: 0.9rem;
}

*::selection {
    background: var(--main-color);
    color: #fff;
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /*z-index defines stack order of element*/
    display: flex;
    align-items: center;
    /*controls space around cross axis*/
    justify-content: space-between;
    /*controls space around main axis*/
    padding: 30px 170px;
    background: var(--background-color);
}

.logo {
    color: var(--main-color);
    font-weight: 600;
    font-size: 2.4rem;
}

.navbar {
    display: flex;
}

.navbar li a {
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 10px 20px;
    font-weight: 500;
}

.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Website for Foodies!</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <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=Nunito+Sans:wght@300;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
</head>

<body>
    <header>
        <a href="#" class="logo">Foods</a>
        <div class="bx bx-menu" id="menu-icon"></div>
        <!--class=" bx bx-menu" is responsible for icon from boxicon-->
        <ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>
    </header>
</body>
</html>



I was trying to make a responsive website and I was expecting the text in my navbar to change color when i hover on it

Hover is not working on navbar items and the cursor is changing to hand when we hover beside text and not when we hover on text
According to your code :
.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}

you tried to give hover effect on anchor tag as  class navbar > li > a.
Look at this your html code now:
<ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>

<a href="#Home"></a>

There is nothing to show inside anchor tag. Hope you understand this problem. Put all the menu texts Home about menu service contact inside anchor tag. like this:
<a href="#Home">Home</a>

