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
Unfortunately it's the sticky header.
And I think the height of your dropdown is unknown
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...
This is the normal solution but you have to know the height
You could probably guess it though
thanks @croganm it really helped me
Good 👍
I saw a message you sent about text animations as you scroll. I'd use gsap for something like that
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...
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/#
Do you mean the hamburger menu? What specifically is wrong with it?
Your menu and everything works
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
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
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
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
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>Where did you try it.
in the css "button:focus{
outline: none !important;
}
Haha you use important quite a bit
That should work
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
There's usually a better way around it but either way. Maybe do
button:focus, button:active?
Instead of just focus