In my bootstrap application, I am facing an issue with the hamburger menu. To understand the problem better, you will need both a laptop and a mobile device to follow these steps:
1: Visit on your desktop computer.
2: Scroll up and down the page to see that the navbar is fixed, which is the desired behavior.
3: Click on any link in the navbar, like 'Courses' or 'Services', and notice how it takes you to the relevant section displaying its title and content.
4: Now, access the website on your mobile device.
5: Open the hamburger menu and navigate to the same section. You will find that even though it takes you to the right place, the section's title is covered by the menu. To view it, you have to close the menu.
I wish for the mobile experience to mirror the desktop one where the section's title is visible without closing the hamburger menu upon navigation.
What changes are necessary to achieve this functionality?
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
...
</nav>
body {
padding-top: 80px;
}