Having very limited experience with Javascript, I decided to incorporate a feature on my webpage where the navbar changes size as the user scrolls down. The only way to achieve this was through the use of Javascript.
Including the .js file in my HTML document and adding an onscroll event to the navbar with a predefined function from the Javascript file seemed like the right approach. However, despite verifying that the function is indeed being executed by including a console.log(); statement, the intended styling is not being applied. It's puzzling why this is happening.
This snippet shows my HTML implementation:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Remote Homework') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Stylesheet from initial build, located in public folder -->
<link rel="stylesheet" href="{{ asset('style.css') }}" type="text/css">
</head>
<body>
<div id="app">
<nav id="navbar" onscroll="navbarSizing()" class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top">
<!-- Use container-fluid to arrange navbar items from edge to edge -->
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}#content1">
<img src="{{ asset('images/better_logo.png') }}" alt="Logo" style="width:105px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content1">{{ __('Home') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content2">{{ __('Info') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content3">{{ __('Contact') }}</a>
</li>
@auth()
@endauth
</ul>
<ul class="navbar-nav ml-auto">
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item">
<a href="{{ route('questions.feed') }}" class="nav-link">Question Feed</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('questions.overview') }}">{{ __('My questions') }}</a>
<a class="dropdown-item" href="{{ route('questions.create') }}">{{ __('Ask a question') }}</a>
<hr class="dropdownmenu-hr">
<a class="dropdown-item"
href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
>
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
@include('pages.footer')
</div>
<script src="index.js"></script>
</body>
</html>
And here I have my JS logic:
function navbarSizing() {
let element = document.getElementById("navbar");
element.style.color = "blue";
console.log("This works!");
}
I'd appreciate any insights into what might be causing this issue. Thanks a lot for your help!