HomeОбразованиеRelated VideosMore From: Joseph Smith

CSS Fixed Headers

1153 ratings | 400797 views
This is a small tutorial on how to modify your css headers to allow them to be fixed. Fixed headers allows you to create a header on the page and then it is fixed in that position on the page, so that as you scroll the header will overlap the content staying in the same place you set.
Html code for embedding videos on your blog
Text Comments (138)
bilal derni (4 months ago)
thanks bro and take a look at this https://codepen.io/bilal-bilal/pen/BMabBM
Cynthia Young (5 months ago)
Thank you for explaining a fixed header.
Edwin Garcia (6 months ago)
I didn't get it but I'll try my best lmao ...
Bigfoot is real guy (8 months ago)
lol ladie dadie do
Social Community (10 months ago)
nonsense tutorial
iTechGaming (4 months ago)
Not nonsense.
estrelita brillantes (1 year ago)
Hi, can you please make tutorial of the same topic but with thrive landing pages and thrive themes. i tried to look for such tutorial but i can't seem to find the best fit.
Game Lover (1 year ago)
thank you buddy
Raihan khan shaon (1 year ago)
https://www.fiverr.com/raihan660/fix-bugs-of-you-html-and-css-file?arrived_from_manage_gigs=true&display_share=true
Micheal Jones (1 year ago)
Awesome video. Thank you! Now, would it be possible to stop the 'content' div from scrolling "behind" the header? Otherwise, if you make your header transparent, the content will overlap.
ruth quansah (2 years ago)
my tabs are too many that it keeps on expanding the navigation table but i want them to be in one column instead of moving to the next column. Any help?
Amanda Granados (2 years ago)
hi im having trouble adding my header onto my page. When i went to customize-->appearance-->header in order to upload header image , it doesnt show on my webpage. is there a solution for this? is there a CSS code i can add or something in order to add my header image? thanks
TheGamingIndian (2 years ago)
Thank you so much i have been searching stackoverflow unsuccessfully for this fo a day now.
Mohammad Shweiki (2 years ago)
I can't thank you enough, I needed the first part of this video for a full width header with centered body. you explained it in like 2 min or less. will you please make a video about a side bar with a toggle content for a responsive website without using framework or libraries except for jquery
BenGewoonMike (2 years ago)
Thx man, short and it works.
Sandra Henkel (2 years ago)
Thank you for doing this!
Lucas Leandro (2 years ago)
Thanks :)
Serj Novikov (2 years ago)
Thanks, man! Like video!
Pj Abing (2 years ago)
what will i do?? it fixed but when i scroll down, it will be cover by the tables??
Venstivensti (2 years ago)
thanks, works perfectly!
ScarcyRS (2 years ago)
In the CSS, add: z-index: 1; That will make it go above all content that has a lower z-index (Default z-index is 0)
ugo prince (2 years ago)
Yes more like a product image between the logo and the navigation
Daniel Velásquez (2 years ago)
How do I make the elements of the body stay below the header?
iLLest Tv (1 year ago)
Holy fuck I’ve been looking for this answer for an hour
MusicIn (2 years ago)
ok thx
chill -_- (2 years ago)
inspect the element with f12 and see what's happening to your div
MusicIn (2 years ago)
hey when i want to write margin: auto; content will be visible
Daniel Velásquez (2 years ago)
I'm referring to both of you haha! Thanks a lot!
ugo prince (2 years ago)
How can i add an image to the fixed header? for example on a single product page of a shopping site i would like the product to appear on the heer . you could look at this link for examle : http://www.houseoffraser.co.uk/on/demandware.store/Sites-hof-Site/default/Product-Show?pid=228234316
chill -_- (2 years ago)
here is a working example: https://jsfiddle.net/21xvpt87/ while this works, it's best not to clutter the header. you could add a product image above the header. also,the example will break as the browser shrinks. you should learn responsive design to fix this.
chill -_- (2 years ago)
i will make a jsfiddle example and link it you when i get some free time
ugo prince (2 years ago)
Yes more like a product image between the logo and the navigation
chill -_- (2 years ago)
Could you explain it a bit more? The link doesn't really help? Would you like a small image next to A logo/ nav links
Mostafa Mohammad (3 years ago)
Thank you very much
phani kumar (3 years ago)
Thanks allot.
习世凯 (3 years ago)
Use "left:calc(50% - 480px)" for .header to center it,spaces around "-" are needed.
Siraj Ahmad (3 years ago)
Sahitya Karn (3 years ago)
nice sir
Muhammad Talha Bilal (3 years ago)
thanks bro
Alamgir Khan (3 years ago)
very helpful sir i done the same the header is fixed and sliding with scrolling but it when i scroll and it reach the content then it is scrolling under other images and login menu of the content i want that it scroll above other elements
Alamgir Khan (3 years ago)
+Benjamin Wilde thank you so much its working on z-index: 1 or 990 ;
Benjamin Wilde (3 years ago)
+Alamgir Khan Add to the header's css: z-index 1; If this doesn't work, wrap your content into a div, give that div a position (absolute or relative), then add under position: z-index: -1;
Dexter Dake (3 years ago)
Great video! Helped me out a ton!
Html Css (3 years ago)
Thank you so much.
Natalie Chueng (3 years ago)
Thank you so much, this is very helpful!
Juan Diaz (3 years ago)
Must subscribe. This is gold mate, cheers!!!
Christian Elena (3 years ago)
Great stuff thanks!
Hasan Moussawi (3 years ago)
dear sir , i have a problem when i minimize an html web page the elements( header, slide, and paragraphs inside body ) are change their location and when i maximize the page all return to the true place so please help me!!!
chill -_- (2 years ago)
You need to use responsive web design. Search for a css responsive framework or learn Css media quires
N. Ayancan (3 years ago)
+Hasan Moussawi Search for media queries if you are looking for a responsive design.
Daniel Wong Kam (3 years ago)
Thank you so much !!! It helped me a lot
Leslie Howard (3 years ago)
I learned more about fixed headers in this video than the previous 5 or so...lol...Thanks!
Georgi Georgiev (3 years ago)
Thank you very much for the lesson! GOD bless you and keep you.
Ahmed Qureshi (4 years ago)
pretty helpful like it
Udaya Niroshana (4 years ago)
thank you so much :D good tutorial 
Dr.German (4 years ago)
Oh this is not the CSS i was looking for i was looking for the game one xD
John Thorgard (4 years ago)
Really good tutorial. Easy to follow and very professional. I like your voice. Thank you so much.
nedim kufi (4 years ago)
great
darshan bane (4 years ago)
amez dude this will help me and others to....
Anil vooppala (4 years ago)
its only vertical scrolling what about if you need to scroll horizontally and the header need to scroll along with the columns
Carlos mora (4 years ago)
U are the man :D
Bass.Boi (4 years ago)
Perfect, thank you!
Amir Siddeeq (4 years ago)
Also, I needed to know how to make the content areas and how to center them as well.
Alamgir Khan (3 years ago)
+Amir Siddeeq content{margin: auto width : something; min-height: 500px or something } but the margin: auto will work
Amir Siddeeq (4 years ago)
I wanted to request a video as I didn't see specific video for this. I wanted a tutorial on how to make the link color stay blue after you click it or have it turn back to blue if the page were to be refreshed.
Bart Koevoet (4 years ago)
Help me, I made this header and now i cant scroll while there is more content!!! HOW DO I FIX THAT PLEASE! Thank you.
Ketoma (4 years ago)
Probably, overflow:hidden. Change it into Auto.
Joost de Lange (4 years ago)
Zet achter <div class="header"></div> nog een keer een </div> Je kunt dan wel scrollen + de header is nog steeds fixed.
Bart Koevoet (4 years ago)
Help me, I made this header and now i cant scroll while there is more content!!! HOW DO I FIX THAT PLEASE! Thank you.
ImageInMotion.com (4 years ago)
I did this on a page I'm building... header is fixed but I cannot scroll down the page.
Bart Koevoet (4 years ago)
Help me, I made this header and now i cant scroll while there is more content!!! HOW DO I FIX THAT PLEASE! Thank you.
Gabriela Nedelcu (4 years ago)
very useful, thank you!
Bart Koevoet (4 years ago)
Help me, I made this header and now i cant scroll while there is more content!!! HOW DO I FIX THAT PLEASE! Thank you.
Pagyutioper Pagyu (4 years ago)
thank you amazing tutorial
wu yan (4 years ago)
very nice tutorial... thx and god bless you and the world.. God bless you and the world.. _^___^
Erryel Monreal (4 years ago)
how shall i do it? if my header's an image?
Arnold Casiano (4 years ago)
how can i apply it to cms like joomla
Jean Qu (4 years ago)
Got it/
Jean Qu (4 years ago)
Code pls ? No ...(I dont know how to say this) copy things
Anudeep Lotey (4 years ago)
Great Video! Can you please explain how you made the black and white template? I can't figure it out.  
hector villasano (4 years ago)
your awesome 
Graeme Duncan (5 years ago)
Thank you so much! This isn't what I was wanting to do but showing how to put another header container div around it and setting the width and margin on that to center has saved me many hours of frustration haha! Thanks again man!!
Alvaro Grados (5 years ago)
thx
WishesNetwork (5 years ago)
Thanks for the help. Had some troubles with fixed headers, not anymore.
Diego Rosales (5 years ago)
wow i've been looking for this all day! thanks!
Games (5 years ago)
Dammit I was thinking about making an HTML/CSS cartoony video tutorials! This guy beat me to it! Oh well, if anyone needs any help with CSS and HTML, send me your code or ask me I can help too! I like to help!
DREAMER MATHEWS (4 years ago)
hey can tou tell me how to put a logo to the center of the headermenu
Nikhil Ranka (5 years ago)
thanks!!
LCCI EXPO (5 years ago)
my header and footer is fixed but i can't get my content to scroll, i need help quick
Afrian Hanafi (5 years ago)
how about, floating menu after scroll ?
hodsonny products (5 years ago)
Thanks a lot it is very usefully  Y(^_^)Y
Steve (5 years ago)
Thanks
solfinker (5 years ago)
To the point, concise... and it works! I definitely follow this guy.
TRUTH HUNTER (5 years ago)
Please contact me. I have something i've been working on,SXSW wants me to pitch. It could be BIG,and could use your help.
SooCat (5 years ago)
thank you for this video mate :D but i got a problem. when i make it stick to the top it always stick to the top which i dont want to. if you dont know what i mean then you could look up feed the beast website and see how that site works. i want the links to be fixed but have a header over it.
oceej0 (5 years ago)
I've been stuck on this for sometime, but this I believe will help me alot, thank you for posting.
ufd23 (5 years ago)
What is your content HTML? I have all the CSS but not sure what the CSS .content is supposed to connect to on the HTML page? thanks
geri911 (5 years ago)
that was awesome my friend, had hit subscribe. :D
adelle1965 (5 years ago)
Brilliant tutorials, thank you!
phaetonx22 (5 years ago)
Thanks!!!!!! Subscribed.
BottleEye21 (5 years ago)
Thank you so much, this was really helpful! Subscribed :)
Markess A. Wilder (5 years ago)
I'm sure it's me, but when I move the maincontent margin down to show below the header the header moves as well. The header only moves up to the top if I set the maincontent to "0" Not sure what's going on and I would also like to know how to do it with a header and footer fixed... Thanks.
Juliana Alcantara (5 years ago)
Big Love and thanks
Carlo Dizon (5 years ago)
how ? can you show me the code .
Carlo Dizon (5 years ago)
how to solve the problem of overlapping the header by the following conten ?
Evol07 (5 years ago)
Great Tutorial. Informative, to-the-point and even funny in places. Keep up the great work.
FraiseSauvageDesBois (6 years ago)
Thanks a lot, that's helping me.
TheNHstudios (6 years ago)
Hi! Uhm, on my site it scrolls down as showed, but it scrolls down behind my content, (coded in style.css)
Rogie McDodgeball (6 years ago)
Nevermind, i used the z-index to put the header on top. :P I was using absolute positioning which i think was pushing the content on top
Rogie McDodgeball (6 years ago)
My only problem is that when i do this, the header is fixed just like it should be, but it goes behind the content of my page and the contend gets pushed up a little bit. Could you help me out please?
TheGuy (6 years ago)
where can i get code ?? BTW one of the best web development and design tutorials !! :)
d4rkmag3rz (6 years ago)
Ok there's kind of a problem here, when you resize the browser and scroll from left to right, the content within the menu bar goes along with it? so it doesn't slide along normally with the page help?
d4rkmag3rz (6 years ago)
well the 100% width should do that?
Lőrinczy Máté (6 years ago)
This is awesome!!! --> Width: 100% <-- is the solution of my all problems :)
dasten123 (6 years ago)
Why did you define classes and not IDs? Don't you use these elements only once?
Alan Vinten (6 years ago)
Nevermind xd
Alan Vinten (6 years ago)
How can you make the header to fill the whole top from left to right and stays like that on all screen resolutions?
Rodando Extremo (6 years ago)
relly good tutorial! is well explained. thanks
Arturo Aguilar (6 years ago)
thousand salute to you man... ^_^
Joseph Smith (6 years ago)
Thank you sir, sorry for the long break in tutorials, are are having to balance all this out with work, college, school and everyday life... it is taking a little longer than expected but soon we will get back to it!
Chris Scho (6 years ago)
GREAT ! Thank you very much^^ Greetz from Berlin
Joseph Smith (6 years ago)
Thanks man!
Caleb Lewis (6 years ago)
you really do deserve A LOT more views and likes than you're getting!! these tutorials are awesome.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.