Тёмный

Prevent Fixed Navbar from Overlapping Content (Content Shifting Upwards) 

ByteGrad
Подписаться 158 тыс.
Просмотров 97 тыс.
50% 1

Опубликовано:

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@williamthomas2823
@williamthomas2823 Год назад
Thank you so much for this clarity. I have just spent hours building a nav bar from scratch and the overlap was frustrating but I finally done and wanted to see if there was a shorter way to do it and here is so again thanks bud
@eethend
@eethend 4 месяца назад
Im just learning HTML and you have no idea how much simple videos like this help so much. Thanks for explaining straight to the point what the issue was. Congrats on being the one to teach me about z-index existing LOL
@black3ru
@black3ru 4 месяца назад
real 🤣🤣
@Germane_5
@Germane_5 Год назад
I wish I could like this video a million times. 😢 Thanks.
@Alan_the_Red
@Alan_the_Red Год назад
I just set the height of my wrapper div to min-height and it fixed the issue. This is a cool method for a fixed height though!
@fannienatourz
@fannienatourz Год назад
I have a class project and the deadline is in a few hours but i have been stuck on this for quite a while now. Thank you soo much for this video. It was just what i needed
@lutherevangelista605
@lutherevangelista605 Год назад
just googled my problem and this video came up. It solved my problem. Thanks!
@TheDarknight7000
@TheDarknight7000 3 месяца назад
Thank you so much for this you have helped me so many times that i dont know how to thank you. You are my savior
@abumuslim6763
@abumuslim6763 7 месяцев назад
you are the best, life saver, thx a lot
@abelzeleke7369
@abelzeleke7369 Год назад
that's so help full I have been googling all day
@yuu8789
@yuu8789 Год назад
We have this individual school project and the deadline is tomorrow. I was about to continue where I left of few months ago and realized I'm still working on the layout. I got stuck here and thank god I found this video. Thanks!
@rotes3106
@rotes3106 2 месяца назад
I simply use position sticky instead of fixed. that doesn't cover the contents beneath it and they remain in theri static position. Thanks for the content.
@PepeDaily
@PepeDaily Год назад
You're an angel. And thank you for explaining aswell, made so much sense!
@Al-Miqdad
@Al-Miqdad Месяц назад
Man you're just LEGEND !
@stellanwae5050
@stellanwae5050 Год назад
I got the solution at 0:59 seconds! This was excellent
@55BLOCKS
@55BLOCKS 6 месяцев назад
You save my interview project
@ProfeRo9
@ProfeRo9 3 месяца назад
Thanks bro, simple, understandable and extremely useful :)
@spsmpssm238
@spsmpssm238 8 месяцев назад
Thankyou so much brother from india🎉
@aminofficial5399
@aminofficial5399 Год назад
❤ wow superb. I fixed it 😊. I watched many videos but not solution finally got ❤
@softech2937
@softech2937 Год назад
thanks for explaining as well ,simply slowly aproach
@MC_FortunaCraft
@MC_FortunaCraft Год назад
Finally someone who explains this
@offgridvince
@offgridvince Год назад
Exactly what I needed! Thx.
@tanmaysamanta4343
@tanmaysamanta4343 Год назад
You Sir are a lifesaver!!!!!
@Joe-xo8ns
@Joe-xo8ns 10 месяцев назад
you are life saver
@anja8213
@anja8213 Год назад
YOURE A LIFE SAVER! Thank you
@lucianpascu8445
@lucianpascu8445 6 месяцев назад
I'm not sure that will work for smaller screens if the header has elements that will wrap. Wrapping means the headers' height will be bigger. Actually, I've just tested before posting. Thus, that's not the final solution keeping into account that responsiveness is a must these days.
@AnnoyingMe9
@AnnoyingMe9 Месяц назад
Thank you bro iam struggling from hours you helped me out❤️
@mr.pjarts9142
@mr.pjarts9142 9 месяцев назад
thank you so much .Love from india ❤
@shivendradwivedi8887
@shivendradwivedi8887 4 месяца назад
You saved my time man 😊
@SampleStandard
@SampleStandard Год назад
Thanks a lot , your video Helps me in such a good time !
@RandomFacts-UTube
@RandomFacts-UTube Год назад
Thank you so so so much sir. It really works. 🎉
@IrfanKhan-jg7ft
@IrfanKhan-jg7ft 10 месяцев назад
Thank you sir, your video is really helpful❤❤❤❤❤❤❤❤❤❤
@jociabela9930
@jociabela9930 3 месяца назад
So useful !! thanks
@lollipop036
@lollipop036 4 месяца назад
❤thank u soo much I was stuck in this part.
@boniacu
@boniacu Год назад
Thanks, mate!
@herainpratapsingh1972
@herainpratapsingh1972 Год назад
thank you so much broooo made my day
@lovelychawla1708
@lovelychawla1708 5 месяцев назад
Thank you very much ❤
@vanshop7335
@vanshop7335 11 месяцев назад
Thanks for the video
@houssem224
@houssem224 9 месяцев назад
thank you for the informations ♥
@IrtizaShahbaz
@IrtizaShahbaz 8 месяцев назад
thank you so much
@zaminali8989
@zaminali8989 Год назад
thank you so much
@carlosromero-sn9nm
@carlosromero-sn9nm 5 месяцев назад
Awesome video
@SriRamaMaruthi-o6t
@SriRamaMaruthi-o6t 10 месяцев назад
Is it good idea to fix padding to 60px? Will the toolbar height not change depending on screen?
@samairairam_0794
@samairairam_0794 6 месяцев назад
Thanks bro ✨
@techrohitjondhale
@techrohitjondhale 8 месяцев назад
Thanku brother my problem is fixed
@R.KFilmsProduction
@R.KFilmsProduction 7 месяцев назад
Thanks Very Thanks you are a great
@MohammadHadi-01
@MohammadHadi-01 5 месяцев назад
best , its work! and i sub you beacuse you are best
@rahulguptarahulgupta1363
@rahulguptarahulgupta1363 2 месяца назад
Thank You👍
@mahesheditz
@mahesheditz 3 месяца назад
thankyou very much
@azemazaotaru9788
@azemazaotaru9788 Год назад
thank you bro😩😩😩
@kashifdeshmukh9340
@kashifdeshmukh9340 Год назад
Life saver !!
@bucztechph
@bucztechph 3 месяца назад
got a problem with this one, but with a responsive navbar. whenever i use the scrollreveal animation my responsive navbar overlapped my content, i already set the z-index high and yet it still not working
@DukofmtzDuke
@DukofmtzDuke Месяц назад
This is wonderfut indeed
@anguss1917
@anguss1917 23 дня назад
what if i have a background to the section under the nav?
@DouglasPinedaGutierrez
@DouglasPinedaGutierrez 7 месяцев назад
Clutchest video on the internet stg
@docodezz
@docodezz 10 месяцев назад
thanks🚀
@janakaone
@janakaone 4 дня назад
Or you can use position sticky
@GTYassine
@GTYassine 11 месяцев назад
please i have question how to prevent collapsed menu not pushing content down when expanded?
@ceezgeez1793
@ceezgeez1793 Год назад
z-index: THANK YOU
@NokrisMx
@NokrisMx 2 месяца назад
Muchas gracias :)
@sjjkoff
@sjjkoff Год назад
THANK U SO MUCH 💖💖💖💖💖💖💖💖💖💖💖
@alektronix
@alektronix Год назад
Brother, the marquee scroll is overlapping the navigation bar 😢😢 how to fix that
@Arben40
@Arben40 Год назад
THANK YOU
@SuperUnmad
@SuperUnmad Год назад
Can you please give me a solution while using tailwind in react web app. I am facing problem using tailwind . Please assist
@austinedwards6334
@austinedwards6334 Год назад
My nav bar now stays fixed, however everything scrolls over the top of it. Can you please advise?
@austinedwards6334
@austinedwards6334 Год назад
Actually, I was wrong. The nav bar is fixed, but everything was scrolling UNDER it. Because it was transparent, you could see the text overlapping. I changed the nav bar background to white, which has solved that problem. However, I have 5 buttons which scrolls to a different section of the page. Each section scrolls to the top of the page and doesn't stop at the nav bar. I've been racking my brain for 2 hours but cannot solve it. Can anyone advise?
@ashu3128
@ashu3128 Год назад
​​@@austinedwards6334hey!i'm in exact situation right now,i will be sooo grateful if u tell me the solution if u figured it out,please!!❤
@MrThebigcheese75
@MrThebigcheese75 8 месяцев назад
@@austinedwards6334 Try using display: sticky and set a top value the size of the navbar. It would be so much easier if you could just set the fixed have have the browser change the available area to be reduced accordingly. CSS is the hack of hacks.
@ruairidhgrass3479
@ruairidhgrass3479 Год назад
mmmm I want the page content to be h-screen and this just makes it h-screen + 60px which is not what I want
@SenagaTech-Hub
@SenagaTech-Hub Год назад
Beautiful❤❤❤❤
@alexi2706
@alexi2706 Год назад
so the answer is: set z-index to 99999 - also works for me
@book2nez500
@book2nez500 Год назад
Thank you so much
@Ronaldobravo-z1o
@Ronaldobravo-z1o 2 месяца назад
thank you so much
@DukofmtzDuke
@DukofmtzDuke Месяц назад
This is wonderfut indeed
@DukofmtzDuke
@DukofmtzDuke Месяц назад
This is wonderfut indeed
Далее
Встреча в Лифте 😂
00:43
Просмотров 274 тыс.
Front-end web development is changing, quickly
3:43
Просмотров 1,3 млн
File & Image Uploads in Next.js 15 Are Easy Now
23:37
Просмотров 2,7 тыс.
Make Nav Link Active For Each Page With JavaScript
13:58
Why & When to Use Semantic HTML Elements over Divs
12:01
You probably want position: sticky instead of fixed
15:55