Welcome to all you talented Stackoverflow bootstrappers!
I have a burning question that I believe has not yet been asked, and I am eager to discover the solution.
Let me walk you through how to replicate this bug:
- First, navigate to the following page: (the current URL where I am testing this bug)
- Next, resize the page to tablet size
- Now, try using the navbar on the page
If you notice, when you resize the browser, the URL changes to include #section, causing issues with spying/scrolling alignment.
IMPORTANT: The problem does not occur on mobile devices, so it's not something clients will necessarily face, but it's been bothering me personally.
Thank you in advance for your valuable insights and responses.
Update: Clicking on the brand title appends #section-1 to the URL without resizing, which is perplexing to me. I suspect it may be related to Bootstrap.
The only Javascript code present on my page is as follows:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
This script closes the toggle menu after a selection is made on a mobile device.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
Based on screen size, the above code offsets the scrollspy behavior.
Update #2
The reason an offset is required is due to the presence of fixed-top class, causing issues with the scrollspy functionality.
Your help and expertise would be immensely appreciated.