Mobile navbar links inaccurate

Bootstrap Studio Help
1

My menu links works perfect in 992px and above. But on smaller screens (navbar toggle) the href links on same page is inaccurate. It puts me almost halfway through the section i’m linked to.

Anyone had this problem before?

2

Are you using ids to link? You might find the element with the id starts invisibly further up the page in mobile view than in desktop view, due to its spacing attributes.

Don’t forget, any link will always display as line 1 at the top of the screen, so you always need to take that into account when designing links to visually appear on screen.

eg: a href=“index.html#gotothispart”, referring to section id=“gotothispart” when clicked on will move the viewpoint so that that EXACT part in the html code is line 1 on the display. So if you have that id set on a section, the very top of that section becomes the New line 1 of your display. This causes visual problems when you have fixed top menus for example, if you clicked that link, the page will have line 1 of #gotothispart obscured by the menu. So you have to incorporate margins and padding for the content within that id’d section to have enough room to not be obscured by the menu. Sounds like you need to have some media queries set up for the desktop view, and remove a lot of margin/padding in mobile view from the id sections for it to display properly when linked to.

LONG STORY SHORT:
links going to ids when clicked don’t center the element on your screen, they scroll so that the id is line 1 of your screen. Keep that in mind when designing id links.

Sometimes you might want to not even add the link id to the element in question, but create a div element BEFORE it, with no attributes except for the id, just to get the viewpoint right.

3

I usually put an empty span at the begining of the section and have the link pointing to this.

HTML:

<section>
<span class="anchor" id="sectionname"> </span>
<!-- your content here-->
</section>

CSS:

.anchor {
position:relative;
top: -100px //set this value according to your design requirement
}
2 Likes
4

I do it with javascript
I give the navbar or header an ID in this example the navbar has the ID=“mainNav”

add this to a javascript file and the anchor links scroll to the desired place under the navbar
no css needed and no hashtags in the window.history

code snippet

const mainNav = document.querySelector('#mainNav');

if (mainNav) {
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
		anchor.addEventListener('click', e => {
			e.preventDefault();
			let anchorLink = document.querySelector(anchor.getAttribute('href'));
			if(anchorLink) {
				let offset = mainNav.offsetHeight,
				position = anchorLink.offsetTop;
				window.scrollTo({
					top: position - offset,
					behavior: 'smooth'
				});
			} else console.log(`debug: The id ${anchor.getAttribute('href')} does not exist on the page`);
		});
	});
	
	// hide the mobile menu when click an anchor link
	const navbarCollapse = mainNav.querySelector('.navbar-collapse');
    if (navbarCollapse) {
      let collapse = new bootstrap.Collapse(navbarCollapse, {
        toggle: false
      });
      navbarCollapse.querySelectorAll('a[href^="#"]').forEach( link => link.addEventListener('click', () => collapse.hide()));
    }
}

That’s it

5

I don’t have this problem at all unless as the others have suggested, you used some type of Link system that is sending them there. If not, then maybe you should let us know what Nav you are using (default BSS or something you got somewhere else), and sharing the link to the uploaded site would help just as much.

Personally I see no need to add any scripts at all to the Nav unless you are altering it to do things the default cannot do, or do well. Seems to work right out of the box and easily altered for styles and sizing so far for me.

6

Here is an example

You can turn on and off the script in the upper right corner. With javascript there is no need to add a css class to every anchor you want to scroll to.

All is default BSS components, I never use custom code in BSS, I do copy as HTML in BSS and use that code in other project

this is the code that I used in the example

document.addEventListener('DOMContentLoaded', function() {

	"use strict";

	const mainNav = document.querySelector('#mainNav');
	if (mainNav) {
		const navbarCollapse = document.getElementById('navcol-1');
		let collapse = new bootstrap.Collapse(navbarCollapse, {
			toggle: false
		});

		document.querySelectorAll('a[href^="#"]').forEach(anchor => {
			anchor.addEventListener('click', e => {
				e.preventDefault();
				let anchorLink = anchor.getAttribute(['href']);
				if(anchorLink === '#') return
				let anchorID = document.querySelector(anchorLink);
				if(anchorID) {
					let offset = mainNav.offsetHeight,
					position = anchorID.offsetTop;
					if(mainNav.offsetTop === 0 && navbarCollapse.classList.contains('show')){
						offset += -navbarCollapse.offsetHeight;
					}
					window.scrollTo({
						top: position - offset,
						behavior: 'smooth'
					});
					collapse.hide();
				} else alert(`debug: ${anchorID} does not exist on the page`);
			});
		});
	}

}, false);
1 Like