Prevent Fixed Navbar from Overlapping Content (Content Shifting Upwards)

Подписаться 124 тыс.

Просмотров 68 тыс.

50% 1

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
0:00 Solution
#webdevelopment #coding #programming

Наука

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

15 янв 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@williamthomas2823 8 месяцев назад

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

@fannienatourz 10 месяцев назад

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

@PepeDaily Год назад

You're an angel. And thank you for explaining aswell, made so much sense!

@abelzeleke7369 Год назад

that's so help full I have been googling all day

@Germane_5 8 месяцев назад

I wish I could like this video a million times. 😢 Thanks.

@lutherevangelista605 Год назад

just googled my problem and this video came up. It solved my problem. Thanks!

@anja8213 Год назад

YOURE A LIFE SAVER! Thank you

@offgridvince Год назад

Exactly what I needed! Thx.

@Alan_the_Red 9 месяцев назад

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!

@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!

@user-mk3zz2cj2n 8 месяцев назад

Thanks a lot , your video Helps me in such a good time !

@aminofficial5399 Год назад

❤ wow superb. I fixed it 😊. I watched many videos but not solution finally got ❤

@softech2937 9 месяцев назад

thanks for explaining as well ,simply slowly aproach

@saurabhrawat5942 8 месяцев назад

Thank you so so so much sir. It really works. 🎉

@MC_FortunaCraft Год назад

Finally someone who explains this

@tanmaysamanta4343 10 месяцев назад

You Sir are a lifesaver!!!!!

@user-zr2ll4vr2g 5 месяцев назад

Is it good idea to fix padding to 60px? Will the toolbar height not change depending on screen?

@herainpratapsingh1972 10 месяцев назад

thank you so much broooo made my day

@boniacu 10 месяцев назад

Thanks, mate!

@55BLOCKS Месяц назад

You save my interview project

@stellanwae5050 8 месяцев назад

I got the solution at 0:59 seconds! This was excellent

@book2nez500 Год назад

Thank you so much

@vanshop7335 6 месяцев назад

Thanks for the video

@IrfanKhan-jg7ft 5 месяцев назад

Thank you sir, your video is really helpful❤❤❤❤❤❤❤❤❤❤

@lovelychawla1708 18 дней назад

Thank you very much ❤

@spsmpssm238 3 месяца назад

Thankyou so much brother from india🎉

@houssem224 4 месяца назад

thank you for the informations ♥

@abumuslim6763 Месяц назад

you are the best, life saver, thx a lot

@zaminali8989 9 месяцев назад

thank you so much

@Joe-xo8ns 5 месяцев назад

you are life saver

@mr.pjarts9142 4 месяца назад

thank you so much .Love from india ❤

@lucianpascu8445 Месяц назад

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.

@GTYassine 6 месяцев назад

please i have question how to prevent collapsed menu not pushing content down when expanded?

@alektronix Год назад

Brother, the marquee scroll is overlapping the navigation bar 😢😢 how to fix that

@samairairam_0794 Месяц назад

Thanks bro ✨

@techrohitjondhale 3 месяца назад

Thanku brother my problem is fixed

@carlosromero-sn9nm 22 дня назад

Awesome video

@R.KFilmsProduction 2 месяца назад

Thanks Very Thanks you are a great

@SuperUnmad 7 месяцев назад

Can you please give me a solution while using tailwind in react web app. I am facing problem using tailwind . Please assist

@Arben40 Год назад

THANK YOU

@kashifdeshmukh9340 9 месяцев назад

Life saver !!

@sjjkoff 11 месяцев назад

THANK U SO MUCH 💖💖💖💖💖💖💖💖💖💖💖

@azemazaotaru9788 7 месяцев назад

thank you bro😩😩😩

@jshellop 5 месяцев назад

thanks🚀

@austinedwards6334 11 месяцев назад

My nav bar now stays fixed, however everything scrolls over the top of it. Can you please advise?

@austinedwards6334 11 месяцев назад

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 8 месяцев назад

@@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 3 месяца назад

@@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.