Scroll should move to the top of section

in my navbar when i click on the any navbar item i should move to the exactly top of the that section but i am not moving exactly top of the section here is my website link"https://talhamustafa1.github.io/proxi5/#
18 Replies
croganm
croganm15mo ago
Unfortunately it's the sticky header. And I think the height of your dropdown is unknown
croganm
croganm15mo ago
How to prevent anchor links from scrolling behind a sticky header w...
Yesterday, we looked at how to create sticky headers with the position: sticky CSS property. One problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu. You can see it yourself in this demo. Today, I want to talk about a CSS one-liner you can use to fix this. The scroll-m...
croganm
croganm15mo ago
This is the normal solution but you have to know the height You could probably guess it though
Moni
Moni15mo ago
thanks @croganm it really helped me
croganm
croganm15mo ago
Good 👍 I saw a message you sent about text animations as you scroll. I'd use gsap for something like that
croganm
croganm15mo ago
Taimoor Shahzada
YouTube
Text Reveal Animation on scroll using GSAP ScrollTrigger Plugin and...
In this video, I will show you how to reveal text on scroll using GSAP ScrollTrigger Plugin and using Smooth Scrollbar for smooth scrolling in this project. Hope you like it. Source Code: https://bit.ly/3LA3rIU Social Account: https://link.taimoorshahzada.com/social Facebook: https://link.taimoorshahzada.com/facebook Instagram: https://link.ta...
Moni
Moni15mo ago
i delete the message because i get it using javascript ny adding adeventlistener for scroll and refresh page thanks . can you help me with this why my sticky navbar toggle icon is not closing i think its due to its sticky position when i remove sticky position it moves to the section but remained opened"https://talhamustafa1.github.io/proxi5/#
croganm
croganm15mo ago
Do you mean the hamburger menu? What specifically is wrong with it? Your menu and everything works
Moni
Moni15mo ago
it does not closes when i click on a navbar item it remained open yes the hamburger menu does not closes itself i have to close it by clicking on it
croganm
croganm15mo ago
Ah I see. I'd add an event listener on the links within the nav bar. If one of the links is removed, I'd remove the toggle on the menu
Moni
Moni15mo ago
ok let me try it and i will let you know one thing it also has a hamburger menu aslo has a black color outline which shows when clicking on it i have tried to remove it by doing outline none but did not make any difference
croganm
croganm15mo ago
So removing it can lead to accessibility concerns, as keyboard it let's keyboard users know what they're focusing on. I don't know if I would fully remove it, I'd probably come up with an alternative that looks better. Regardless, you need to access the focus state. So
button:focus {
outline: none;
}
button:focus {
outline: none;
}
Moni
Moni15mo ago
tried it not mkaing any difference" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent !important; border: 2px solid white !important; "> <span class="navbar-toggler-icon" style=" outline: none !important; background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'30\' height=\'30\' viewBox=\'0 0 30 30\'><path stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/></svg>');"></span> </button>
croganm
croganm15mo ago
Where did you try it.
Moni
Moni15mo ago
in the css "button:focus{ outline: none !important; }
croganm
croganm15mo ago
Haha you use important quite a bit That should work
Moni
Moni15mo ago
i am using important in my my .html button to override bootstrap classes but when i remove important from css for button:focus does not work
croganm
croganm15mo ago
There's usually a better way around it but either way. Maybe do button:focus, button:active? Instead of just focus
Want results from more Discord servers?
Add your server