navbar.html

<!-- Important links that ensure correct behavior with custom font, Bootstrap and CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<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=Oswald:wght@200&display=swap" rel="stylesheet">
<link href=".\styles.css" rel="stylesheet">

<!-- Google fonts -->
<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=Anek+Devanagari:wght@100..800&display=swap" rel="stylesheet">


<!-- ############### Background Image ############## -->
<div class="background-image" style="background-image: url('./Media/bg_5.png')">
</div>

<nav class="navbar navbar-expand-lg" style="background-color: #05163213; color: #aa8aef;">
    <div class="container-fluid">
        <a class="navbar-brand" href="./index.html">
            <img src="./Media/logoV2_large.png" class="img-fluid" style="width: 50%;" alt="">


        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link titleText" href="People.html">People</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link titleText" href="Research.html">Research</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link titleText" href="Publications.html">Publications</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link titleText" href="External.html">External Links</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link titleText" href="Teaching.html">Teaching</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script defer src="app.js"></script>