Encountering an issue with my Laravel application. It seems that when the path is only one level deep, everything appears as expected. However, if the path extends to two levels deep, the padding-top disappears.
https://i.sstatic.net/BqeiQ.jpg
https://i.sstatic.net/lF4Vz.jpg
Both of these routes lead to the same page:
Route::get('/edit', 'HomeController@edit')->name('edit');
Route::get('/profile/edit', 'HomeController@edit');public function edit()
{
$user = Auth::user();
$tab = 'profile';
return view('home.editprofile', compact('user', 'tab'));
}The CSS I'm using includes padding-top: 60px to ensure the fixed navbar doesn't cover the MAIN element. Initially, I achieved this by placing the padding in the BODY tag.
This issue is becoming more significant because /password/reset is already getting cut off at the top. I anticipate it will become a major problem as my application expands and I need to display paths like /users/266 or similar.
I have developed another Laravel application entirely without encountering this problem.
app.blade.php
<!doctype html>
<html lang="en">
@include('layouts.head')
<body>
<div id="app">
@include('layouts.nav')
<main>
@yield('content')
</main>
</div>
@include('layouts.footer')
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$('#waiverModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
</body>
</html>Help?