javascript-project/navbar.html at main · mahnoorcodes/javascript-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style>
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    text-align: center; /* Center text horizontally */
    line-height: 50px; /* Center text vertically */
    width:180px;
    height: 100%;
}
li a:hover {
    background-color:#1f4fb5;
    color: white;

}
.navbar-nav{
    flex-direction: column;
    list-style-type: none;
}
.navbar {
    height: 100%;
    width: 180px; /* Set the desired width of the navbar */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f8f9fa;
    padding-top: 40px;
}
.fa-solid{
    margin-bottom: 40px;
    margin-top:20px;
    padding-left:10px;
    padding-top: 20px;
}
</style>

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="index.html"><i class="fa-solid fa-house"></i><br>Home</a>
        </li>

        <li class="nav-item active">
            <a class="nav-link" href="login.html"><i class="fa-solid fa-user"></i><br>Login</a>
        </li>

        <li class="nav-item active">
            <a class="nav-link" href="registration.html"><i class="fa-solid fa-square-check"></i><br>Register</a>
        </li>
    </ul>
</nav>