Stop fixed navigations covering content on scroll

[@KevinPowell]

I got early-access to a new thing YT is trialing for multi-lingual videos! If you speak Spanish, you can click the settings cog and there is an "audio track" option, with a Spanish audio track. Would love feedback on the quality of it!

[@plexor-dev]

Jajaja cool, that is amazing.

[@QwDragon]

How have you made it? Just recorded video in one language and then add audio for another one? Or you can have different videos inside of one? I'm interested in making RU/EN videos :)

[@plexor-dev]

KZbin app added everything in Spanish from the title to the voice I was very surprised to hear it, it seems native Spanish

[@KevinPowell]

@@QwDragon I'm not entirely sure how it works tbh 😅 - I got invited to trial a new service called Aloud. In the end, they provide you with a single video that has multiple audio tracks to upload to KZbin. I don't know how it encodes the tracks to know the different languages for YT though... aloud.area120.google.com/

[@QwDragon]

@@KevinPowell thanks, that's what I wanted to know - single video track and multiple audio. Very cool feature, but I expect comments in mixed languages to be a bit messy)

[@MrMairu555]

Others have said it before... now it's my turn... You're a mind reader! Have this exact issue that I've been trying to deal with the last couple of days! Been using a padding/negative padding hack, but it's "magic numbers" and a complete pain in the backside that way! This looks perfect and simple! Thank you!

[@frittex]

I can't believe I wasted ~2hours on it, and actually, it's so easy. You're a life saver Kevin, thank you!

[@Lazy4444]

Damn it scares the sht outta me when the video start and there was a voice over speaking spanish xD At first I tought that someone was reuploading your videos with spanish audio. My native language is spanish, but I still prefer to watch videos on english, specially when they have clear pronounciation like you

[@bxrclxys]

This is the exact problem I was having just yesterday and have managed to stumble upon this video a day later. Thank you very much Kevin, much appreciated for the consistent, helpful content!

[@nanavybes]

Exactly what I was looking for 9days ago. Thank you 😊

[@asyncawaited]

You're an absolute beast. I've seen a few of your videos now and your knowledge of CSS has been helpful to me putting together this frontend. You've earned a sub.

[@MrMudbill]

I suppose it may be worth noting that aside from devs, users who are more likely to actually "resize" the window are those on mobile devices switching between portrait and landscape orientation. So if that causes a change to the layout, a ResizeObserver might be more relevant.

[@juanecheverry9055]

The Spanish version sounds amazing! I will personally continue watching your videos in English because I understand both languages and I prefer your human voice over a robot, but I still think it’s pretty impressive that you can have multiple languages in a video like that.

[@Elias-zn6og]

I hear the spanish version too, but I'm learning english and I prefer to learn

[@gbagba81]

Q loco no?

[@blackpurple9163]

How do you set a different language output? I only see captions but the voice is still English

[@juanecheverry9055]

@@blackpurple9163 there’s a video settings button where you can change playback speed, cc, etc The option is called audio track. What device are you using to watch the video?

[@blackpurple9163]

@@juanecheverry9055 my smartphone, no KZbin app I've tried had this option

[@firelop]

I used to got the same problem, I fixed that by adding this css code: margin-top: -100px;padding-top: 100px; EXPLAIN: margin-top with negative value will destroy the space that padding-top makes. So it works.

[@vimalathithand917]

Hey kevin you literally are a lifesaver!! Was just searching for this for almost an hour! Thanks a lot!

[@brandonsayring]

offsetHeight returns an integer value. Using document.querySelector('.primary-navigation').getBoundingClientRect().height will return a float value which will give you the precise height so you dont have to use the hacky -1 solution.

[@dx8pi6o48]

I had no idea you could dynamically change css variables with javascript!!! That's so awesome! If only I knew this sooner xD

[@funworld8379]

Thanks Kevin. I was doing a next js react project where I was facing this issue. I tried to think hard and couldn't come up with the solution. This 2 lines of code saved my day . Cheers🥳

[@MuhammadAbbas-bd4kg]

Literally a life saver. Thanks alot Kevin

[@kdfksfkldsklfkldsff]

Thank you! Thank you! I was literally looking for a solution to this! So helpful!

[@royjr.bustillo9813]

I have been fixing this problem on my code for like 3 weeks, and i just found the answer here. thanks, bro

[@RogerOnTheRight]

You do good work. Straightforward and to the point. All practical stuff.

[@oh-digital]

Thanks, i had my scroll-padding-top on the element i was scrolling to rather than the root, saved me lots of time

[@MatthewMichalsky]

Another approach is to have a css variable that would control both the header’s height + the padding offset. Then, you wouldn’t need JavaScript or worry about window resizing

[@pepperdayjackpac4521]

that would work? :o

[@sktnml]

can you please explain further?

[@uziboozy4540]

@@sktnml doesn't really need more explanation, lol

[@oriel-elkabets]

​@@sktnml :root { --navHeigth: 200px; } .nuv{ height: var(--navHeigth); } html{ scroll-padding-top: var(--navHeigth); } in the root selector you can create css variable the name of the variable start with two hyphen I think the reason Kevin didn't do it, It's because you don't always want to set your navigation height, Sometimes the height comes from the font size, and the padding and so on. In cases like this, you want to use js to get the final height and do the calculation by that

[@betanpc8210]

@@oriel-elkabets Ty for this friend

[@austinedwards6334]

Perfect! Thank you! I've been racking my brains for 2 days trying to solve this issue!

[@Demilada]

Thank you for always helping me solve my css issues!😅

[@paulmitchell2916]

One of the other code tutorial guys uses a trick so the viewer doesn't have to watch and hear typing (and inevitable retyping).. I think he types in all his code and proofreads it, then deletes the bottom line, then the second to bottom line etc.. while shooting the actual video he re-does the lines one by one.. it's slick!

[@andrasjuhasz.]

A better way to do this without JavaScript: 1. Set up a CSS var for the height of the top navigation, as the height of the element rarely change. 2. Use that variable not just for setting top navigation height, but also for setting scroll padding top. Either directly the number, or using the var as part of a calc() function and adding a few extra pixels on top of the navigation height.

[@pohanggg4589]

OMG I always face a problem like this, ALWAYS. So, usually when this happens, I would just simply set the #section_id to one div above its actual position, so when it scrolls, it would show the whole h2.section-title, but still, it does not feel right every time I do it. Sir, once again, thank you sooo much for helping me understand web programing interface, css, js, etc. Keep making videos, keep inspiring! God bless you, sir.

[@masterkratos2]

WHAT THE!!! I was just searching for this, and here you upload the video about it.

[@fernandoboschiero1178]

Kevin, been learning so much from your videos. Thank you for the content.

[@yawnfranco]

Literally perfect timing. Great vid

[@ilyes-grine]

THANK YOU , every time a get a problem in this website am working on, i find that you have done a video about it. last time it was the hover in a mobile and this time the nav covering the content.

[@ajinkya4658]

thanks kevin, much needed video

[@libbeytds]

I just realized he says "Hello my frontend friends" in his intros, not "friend and friends" lol

[@keshavkishorram7678]

You are CSS hero ❤

[@TheCrazySoundStudio]

This way worked! I'm coming here for more CSS tricks.

[@hikari1690]

Omg! This has bothered me forever cause I always need to hack a solution and am glad to find a css solution ❤️

[@JimKernix]

You could also use Math.ceil() to round up in your JS constant and remove the + 1 or + 5 for the pixel value: const navigationHeight = Math.ceil(document.querySelector('.primary-navigation').offsetHeight);

[@prokopistsesmetzis7974]

You mean Math.floor()

[@JimKernix]

@@prokopistsesmetzis7974 Oh, I forgot he changed it to -1 - then yes, Math.floor

[@mykalimba]

@@JimKernix The real issue is that the "offsetHeight" property always returns an integer, so it's only moderately representative of the element's _actual_ height.

[@dsdsspp7130]

that just returns offset height itself. ceil and floor of an integer is the integer itself.

[@JimKernix]

@@dsdsspp7130 What's your point? He notated that it was slightly below the actual number so using ceil will "rounds a number up to the next largest integer", floor "returns the largest integer less than or equal to a given number". So by using either of those removes the need to use +1 or -1 to get to the desired number. I'm not familiar with offsetHeight, I was making a suggestion as to an alternate method to arrive at the number he wanted.

[@jonathanmcdermott25]

You are amazing Kevin! Thank you for all of the helpful tips and tricks. :)

[@daleryanaldover6545]

I always make my navigation bars at a fixed height, this fixes common annoying css layout shifts and inconsistent re-sizing. By default the anchor placement is on the top left edge of the anchor tag, the way I get around this anchor behaviour is by adding a padding-top to the actual anchor element equal to the navigation bar height. This way I don't need to change scroll offset. If you expect the navigation bar height to change that's when you turn to JavaScript for help.

[@विवेकराजपूत]

This video saved my day. Thanks @kevin

[@elproductorrookie8385]

Hi. I solved this problem, configuring a padding-top for the #. It was all due to an oversight, because I thought I was padding-topping my . I'm taking my first html and css lessons. I think that at first it happens to all of us that we do things without knowing.

[@ForgottenGames]

I just opened this video to drop a like because the title was all I needed to agree with

[@frankiefab]

OMG! I just learnt something new which I'm going to apply on my portfolio website. Thank you for this useful tips.

[@universecode1101]

Css is so important ... Great Kevin 👏🏻

[@marianagulias2711]

Awesome video!! Thank you kevin!

[@AlJapairai]

That is actually is going to help me, thank you

[@eniolakayode2384]

You know whats crazy, i was just experiencing this, i thought to use JS and your video pops up.... live saver

[@patelpriyank]

Great video! I always used to do a margin-top for each section but this seems much better. Just out of curiosity, doesn't this affect any other scrolling element on the page? I can't think of anything at the moment but would like to keep in mind if this 'breaks' anything.

[@nickpapadatos7587]

This used to bother me as well - great video, thank you Kevin.

[@AbdicateDotNet]

Awesome video!! Thanks for using a smidgen of JS! :)

[@JackTheZuluman]

I experienced the same thing with my portfolio. Thanks soo much for this

[@mohamadybr]

I had to create the entire functionality in JS, then I learned about scroll-padding-top. It was a frustrating situation xD

[@Gui-sector7]

Very interesting ! I used to to make it with scrollIntoView function in js, that helps to scroll at the center on the element. I even tried to create an absolute element and gave him the #id and put him like 50px on top of the article... that's a bit a diy thing 🤣 haha thank you I didn't know the property scroll-padding-top ! I will try this next project !

[@downpp2255]

Haha, wish i saw... wait this video came out now. I was tearing my hair away when trying to find a fix for it.. Thank you

[@user-ni7ct5vr8u]

Didn't know about scroll-padding. I usually have specific anchors for navigation (a.nav) and then I move them with CSS: a.nav { position: relative; top: 100px }. I will probably start using your solution instead in the future.

[@Obikin89]

I've fixed that issue by setting the height of my navbar in a CSS variable (with rem units so that it's responsive). No JS, and no need for any adjustment at all.

[@rasmuslarsen77]

I’ve done the same. It works quite well.

[@johnntinos1251]

This works only for a specific height navigation bar. So it is responsive on a static height element. Except, if you find all the braking points and use media query in CSS( that have problem in multi language sites).

[@mykalimba]

This is the first solution that I thought of too. I would solve the problem in CSS using custom properties, and not bother with this JavaScript approach.

[@michasosnowski5918]

Thanks, my friend linked me your video and I fixed my problem :)

[@DanielDeight]

Love you Kevin!

[@camilomolina2110]

Esta nueva función de audio traducido al español es genial para todos los latinos que aprendemos a programar gracias a este canal!!

[@leo3464]

Vos escuchas como un chirrido de fondo? Es re incomodo

[@wernayasa]

Looks promising for my novel theme project. I'm struggle with JS, this help me understand JS little bit.

[@tumbler9428]

I did not know "scroll-padding" yet - thank you

[@alexprofit4937]

Great trick , I love it . Thanks

[@lenninpalacios]

Kevin en Español, gracias. Me has ayudado tanto, y ahora en mi idioma!

[@doubledeckercouch6251]

Bummer - was hoping to see the window resize/observer fix covered in this video. Maybe in a ‘part two’? Pleaseeeeee :)

[@doctorbrad]

I wish I could like this video twice... thank you!

[@bwsince1926]

Javascript functions: the bane of my existence. I haven't managed to get into Three.js or similar because even if I know Javascript well-ish, I don't get all the calculations!

[@victoreleanya4375]

Thanks Kevin🎉

[@nocommentaryminecraft4416]

For a second I thought you were gonna start rapping 😂😂 5:15 And we write scroll padding Because that's what I'm setting And here I wanna set the value That we're going to be putting

[@8koi245]

Ahhhh I can't believe this! tysm!!

[@re.liable]

I thought this was going to be a video about those large af navbars in websites nowadays that take nearly half the screen and barely leaving anything for the scrollable content 😂

[@esprit-critique0.114]

i love it , thank you the king 🕺🏿.

[@omarnur2269]

What a legend

[@chukwuebukaobiajulu2849]

This is really awesome

[@mykalimba]

Well, I guess you know now that we all need a t-shirt with "Hola, mis amigos de front-end!" on it, right?

[@jornzander1285]

Great tip! Thanx!

[@Steel0079]

I have never used observers, when you were talking about workarounds for resizing i thought you were going to mention event listeners. Is the observer a more convenient option? Or are there more advantages to observer approach?

[@KevinPowell]

tbh, you could probably just use window.resize. from what I understand (and my JS knoweldge is a bit limited, so take it with a grain of salt), but resize observer tends to be more performant than using an eventListener for resize, but that's more for elements, which can have trickle down effects (and potentially even lead to infinite loops). On the window, I'm not sure if there is a benefit.

[@Edu4Dev]

You can alse use a ::before pseudo-elemento with blank content and negative margin-top.

[@rayrayaray]

thank you kevin

[@DMPDEV]

awesome! I do have a question though, is there a way with only CSS and no Js?

[@QwDragon]

Actually the was a way of making similar thing with paddings and margins, but a spicial property is much simplier!

[@HuynhLuong227]

many thank, you are amazing

[@Alex-xf2dd]

Thank you!

[@supercoolninja]

Nice tips !

[@Ownagin]

how about I just define my navbar height in a variable (let's stay --navbar-height) and have that same variable in my scroll-padding-top ?

[@NeerajGupta-fy1bv]

Hi Kevin, any updates on your new course "Beyond CSS"?

[@indianakernick3788]

"The only people who ever do this are devs anyway". This was a bit of a wake-up call. Maybe I don't need to be using ResizeObserver as much as I do.

[@outpost31737]

I use vanilla JS to solve this problem simply by executing a piece of code that calculates the height of the header (ScrollTop).

[@Hefss]

Thenks, I didn't know you could change css variables in Javascript

[@vohracodes]

youre savior thank you so much 😄

[@supTE]

Thanks for this cool tip.

[@cranjismcbasketball8113]

Thanks for the video. Unfortunately, the link you provided to the code doesn't exist anymore

[@soulvibration-groningen]

Great tutorial. 1 question; I've used a shrinking Navbar where after scrolling 80 px down the Navbar shrinks. The offset remains the initial height on page load. Is it possible to get the actual height? Or should I just subtract the difference from the JS var?

[@mochamadsyahrulakbar8850]

Thank you very much sir

[@sakumi2941]

what if i don't want to add a scroll padding to the whole document? Just one section

[@johannes.kielmann]

navigationHeight - 1 + "px" is that really doing math with the first two elements and then adding "px" to the result to get a string? JavaScript really is magical :D

[@AutsajderRR]

is there a way to do different padding for different elements?

[@RavianxReacts]

My problem it doesn’t even nav to it or it does but it’s like 50 pixels away from the top

[@normanejm]

Right now I have to fix a problem like this in my work. thanks!!! jajaa

[@katemc516]

I have a similar problem, except the fixed nav pops up at the bottom (I have to use absolute in this case), it always blocks the last bit of the content when it does so I added conditional extra padding-bottom to the content when the nav pops up. Now the problem is the content is extended by that extra padding therefore pushing the nav further down so after it pops up I have to scroll down again to see it, so is there any CSS or JS code to make the content scroll down to the very bottom? Also love your videos 😊

[@developer_hadi]

your camera is awesome

[@KevinPowell]

Thanks!

[@sergejstojanovic2518]

Thank You.

[@rafaguzowski8104]

i love your videos!