HomeНаука и техникаRelated VideosMore From: Patrick Benske

Fixed Header Tutorial | HTML & CSS

1150 ratings | 179643 views
Easiest way to fix a nav or header bar to the top of your website. Watch this video on how to create a fixed nav or header bar. Leave a like, comment & subscribe! Media Temple the #1 hosting company. Get on the grid now: http://bit.ly/1ghElf3 Let's take our relationship to the next level: Website: http://pixelarts.co Facebook: http://goo.gl/R6ZwgF Twitter: http://goo.gl/oYIaWa
Html code for embedding videos on your blog
Text Comments (236)
Tonyo Allie (7 days ago)
For forgot to tell people to add padding-top to the body of the html. The padding top allows for you to see the rest of the body content.
i can't see anything!! thanks
bilal derni (28 days ago)
thanks bro ,look at this staf is very fany think https://codepen.io/bilal-bilal/pen/BMabBM
Daphine Katushabe (8 months ago)
hello, Patrick can you please make more css videos with no bootstrap. you are the best teacher so far.
DS Gaming (8 months ago)
Great! Bro. You helped me a lot ;D
jackthebeenstock (9 months ago)
Thanks for that because it drives me crazy when I can't get my header to stick at the very top
TheZalor (9 months ago)
Why does "margin: 0 auto" inside the Container class in the CSS code center all the text. Why doesn't "text-align: center;" not work?
Shardool Bahing (1 year ago)
Thank You So Much
JH Duarte (1 year ago)
hey man thanks for sharing!!!
wjvwyk (1 year ago)
Great Tut! Thanks
Retno Ekasakti Toding (1 year ago)
nice tutorial but there are some paragraphs hidden behind the header how to fix that?????
Muhamed Asil (1 year ago)
simple and helpful
OfficialThing (1 year ago)
Your website has been attacked and medianetnow attacks
Boss Jadzyy (1 year ago)
This really help me out HAHA Thank you bro
Dom B (1 year ago)
great thanks. but how do I keep the navigation bar across all pages without duplicating the code on all pages? any ideas? thanks
when i put a header top is 0 white space is not going why is that
Jawa Al Abdallah (1 year ago)
I have conflicts and a few obstacles...wish if somebody could help me out: 1) The header is covering some text. 2) I have followed each step of constructing the css but got the options(Home, About Us, Portfolio and Context) arrangeged next and on top of each other. 3) The options are not in the right align. 4) The logo and the options are not in white color regardless that I inserted the white-color code. Anybody knows the solution for any of those at least?
Sven Windpassinger (1 year ago)
I need help! after the fixed header the bottom of the content is under the header. What is the best way to fix this problem without margins. clear is that the position can not be longer relative but by the first viewing should the content be under the fixed header
Jacob Venable (1 year ago)
I appreciate the tutorial.  I tried many other tutorials before finding yours.  None of them worked.  Yours did.  Thanks a lot!
Shreyansh Parekh (1 year ago)
How to set a macro to automatically create a particular div when i write something like div.container??
Ethan Booysen (2 years ago)
Awesome, thanks! I was so stupid, the answer was rite in my face! lol thnx again
SimenGAME (2 years ago)
CONTENT BEHIND HEADER? READ AND LIKE You have a container that holds all your content. Just put padding-top: (your value);. .content{ width: 90%; (standard rule for websites) margin: 0 auto; (to align to the center of the page) padding-top: 80px; (to make the content show up further down the page) }
Tarwen (1 year ago)
I know this was 5 months ago, but thank you! The little bit you posted wasn't exactly what I needed, but I was able to play with it and make it do what I wanted. You're awesome!
SimenGAME (2 years ago)
You could have shown how to not have your elements behind the fixed header :P
Ed Buljubašić (2 years ago)
I really don't know why people are complaining. My goal was to find how to "freeze" top row and i got what i was looking for. If someone has problem with not seeing clearly because of zoom, just double click on video and then use alt+tab key to switch between video and your CSS editing program and type. As a programmers you all need to learn to use keyboard shortcuts. It will make you more effective. This being said, i'll subscribe now ;-) Good job mate.
rafik haddad (2 years ago)
the paragraph text from content div is hidding undernith the header background, how can you separate them to see the first line showing
Jawa Al Abdallah (1 year ago)
Thanks. Did it work?
Even Mikael Sletten (1 year ago)
+Jawallah Al Abdallah In your css stylesheet. You can paste it into your html sheet with the use of <style></style> if you want to.
Jawa Al Abdallah (1 year ago)
Shall I paste this in the css file or the html one?
SimenGAME (2 years ago)
;) I had the same problem hehe :P
rafik haddad (2 years ago)
Got it. Thank you
Magnus bang olsen (2 years ago)
great video. But the Nickelbackish guitar riff in the background is pure torture.
Aldsome ISAWESOME (2 years ago)
how do i put image? i cant seem to understand where to put it if it was an image :)
Dorian Sabo (2 years ago)
This is my css code, and i can't see <h1>This is my header</h1>.??? body { text-align: center; } header { height: 100px; background-color: #dbdbdb; width: 100%; z-index: 10; position: fixed; } #banner { width: 100px; height: 500px; position: absolute; top: 100%; background-color: #707070; } #content { width: 100%; position: relative; top: 400px; background-color: #ebebeb; height: 1500px; }
DextroPower (2 years ago)
The text goes under the header???!!!
FP ZooKeeper (2 years ago)
Thank you!
Andrei Simion (2 years ago)
summary: put "position: fixed" in the header's div :)
Irdina Helmy (2 years ago)
cant see ur css :/
Fantratic (2 years ago)
Not what I was looking for, but I can use that template. I was looking for the clickable header, like you click the button and more content shows. So can you do that pleasr? Suggestion.
Shiny Loopy (2 years ago)
Noobinator Codecourse made a video about that. Hope this helps
zDomi (2 years ago)
it's not working for me :(
Yogesh Juyal (2 years ago)
i want do not hide paragraph behind of header???
Sean Tivenan (2 years ago)
great to have a vid with step by step. So many only tell 1/2 the story ..giving the code but not how it fits in with the rest of the project great work thanks for your help :))
Patrick Benske (2 years ago)
Awesome, thank you :)
Haroon Ghazni (2 years ago)
Great tutorial but you should really increase your font-size in Sublime when you're doing YouTube videos mate.
James Gardner (2 years ago)
third that
Leo Cat (2 years ago)
Second that.
Patrick Benske (2 years ago)
Thanks for the feedback!
Haithem Othmen (2 years ago)
Thank you
Aldie Rosero (2 years ago)
thank you! :)
Benjamin Mills (2 years ago)
You are a genius, my friend. Thanks the whole bunches.
Yousuf Farhan (2 years ago)
What if you have 6 links and one of them start from a new line? How can I adjust that? Thanks for uploading btw!
qF I Leno (2 years ago)
Hit Ctrl+F > Type 960 on your CSS dox, and then increase the number :).
Tarik Suday (2 years ago)
Thanks for the great tutorial, very helpful!
Patrick Benske (2 years ago)
No problem!
Zee (2 years ago)
ty
Patrick Benske (2 years ago)
Anytime :)
Nope Nope (2 years ago)
Furthermore, the nav images end up UNDER the logo image.
Nope Nope (2 years ago)
When I use images it fucks the nav bar up completely. Text works fine. But the images end up going all over the shop. And the logo, which is also an image, how do I get it to stay in the very top left corner?
sam fisher (2 years ago)
thanks so much for this tutorial... And any one having prob watching the content just add .content{ margin-top: 200px; }
Patrick Benske (2 years ago)
Yes!
Spencer Colón (2 years ago)
Thanks so much
Spencer Colón (2 years ago)
+Patrick Benske Oh ok, Thank You😁😁😁
Patrick Benske (2 years ago)
I'm saying thank you because you said thank you :)
Spencer Colón (2 years ago)
+Patrick Benske Why are you saying thank you?
Patrick Benske (2 years ago)
Thank you :)
Gameman (2 years ago)
Dead link... :( Please fix... :)
Péter Subecz (2 years ago)
thank you very very very much :)
Patrick Benske (2 years ago)
Thank you :)
100Necrophil (2 years ago)
Thank you for this useful video!
joselikescars (2 years ago)
how about if i don't want it to be fixed? i removed the position: fixed; and the blue background goes away
Mhwulfn Oodpcrq (2 years ago)
Nice, well explained and step by step, learned so much dude. Thanks, keep making some videos i will subscribe. :D
Patrick Benske (2 years ago)
Awesome man. Glad you learned something!
GBelair (2 years ago)
This assumes the user is already very proficient with CSS, in which case they probably already know how to create a fixed header. I wasn't able to understand the content.
Jordan S (2 years ago)
I CAN'T SEE MY CONTENT!!!!!!!!!!!!!!!!!!!! HALP
The Ace Manifester (2 years ago)
+Jordan S you can mess around with the margins
Jordan S (2 years ago)
+Jordan S <strong>pls</strong>
JamaJ222 (2 years ago)
how do you add the collapsing header with it?
Ruthenbert Millien (2 years ago)
bold text: *text* Like this
Ruthenbert Millien (2 years ago)
<b>Thank you</b>
TheNorwegianGuy (2 years ago)
write inside these ** *then it'll be bold* ;)
TheNorwegianGuy (2 years ago)
+AGaming Prence *thank you*
Black Tiger (2 years ago)
Again bad incomplete tutorial. Your header covers and blocks top of the content.
Jawa Al Abdallah (1 year ago)
How many approxiatemly shall I add to the margin so that the header bar can be pushed down below?
Benji Naesen (2 years ago)
If you're so capable yourself, why not make one? :)
Nope Nope (2 years ago)
+Patrick Benske my pleasure
Patrick Benske (2 years ago)
Thank you Ethan!
Nope Nope (2 years ago)
To fix that, put your content into a separate div, and give it enough margin from the top that it will always be pushed down below the header bar ;)
ashenafi tucho (2 years ago)
Thank you very much for sharing your knowledge for us!
Harry Gerasch (2 years ago)
Wasted 12 minutes of my life...Basically the tutorial is useless.. It shows what position:fixed does, but it doesn't show how to move the content to the bottom of the container which is done by adding margin-top : xxx; to the content. You're wasting time by styling the nav bar and logo, which is pointless for a "Fixed Header Tutorial".
Roger Flores (2 years ago)
I really liked the pace you went at, it was very easy to follow. Thanks!
Patrick Benske (2 years ago)
Thanks Roger!
Vijay Patil (2 years ago)
where i can get the code for this video?
Reyes Mathews Joseph (2 years ago)
i made the header & nav to fixed but, the other content is under it. what might be the problem????
Reyes Mathews Joseph (2 years ago)
+nesspire00 thanks it helped
nesspire00 (2 years ago)
+Reyes Mathews Joseph add margin from top you your content class. this should help
Joshua Yabao (2 years ago)
div.container to <div class="container"> How did you do that? Sorry newbie here
Uttam thapa (2 years ago)
no problem you can also use .container for class instead of div.container and for id simply use pound  #container  then it should do just you job perfectly
Joshua Yabao (2 years ago)
Wow! Thanks! Youre so awesome!
Uttam thapa (2 years ago)
+Joshua Yabao he is using emmet plugin search for it
Harper (2 years ago)
This helped alot, thx
Alex Cruz (2 years ago)
very good tutorial i learned a lot thanks a bunch!!
404-Code Not Found! (2 years ago)
Great Video ..... And Thank's To Share You'r Knowledge :) " Knowledge Is An Open Source " This Tutorial Help Me For My College Project :)
Creativera (2 years ago)
very informative and clear explanation thanks !
RK putie mas (2 years ago)
like itt
EdgyBoi2414 (3 years ago)
Ur website has been shut down YYYYY
Andrea Antonaci (3 years ago)
Hi Patrick, thanks for your tutorial it was very helpful for me. Just, i don't know if you saw, but the content is hidden by the header. Do you have a solution about this ? Thanks for your answer. (sorry for my english). Andrea
AR Jishat (7 months ago)
is there any possible to solve without give margin-top? in landing webpage every section will looks very odd if use margin-top high value.
TelstarB (2 years ago)
+Andrea Antonaci just add a margin-top: 180; or some value to the container class. It will add some space between the top margin and the content div and the content will be full available for reading.
John Misiekaba (3 years ago)
Hey thanks. You helped me allot...
BlueBird (3 years ago)
I like your tutorial. The only issue is that the code is really hard to see!
Shahid Khan (3 years ago)
thanx Patrick..
Lerry Franco (3 years ago)
Love your tutorial Big thanks bro ! :)
L Msk (3 years ago)
The code is very hard to see.
Angus Y (3 years ago)
Why floating the list to the left makes the nav buttons line up in a row? Nice tutorial!!!!!!
Dany Han (3 years ago)
Awesome tutorial loved it
Patrick Benske (3 years ago)
+Dany Han Thank you!
Email Marketing (3 years ago)
Very Bad videos it not complete hahahahahah
Inside Stuff (3 years ago)
What is the theme of sublime text?
Inside Stuff (3 years ago)
Thank you!! nice tut btw.
Patrick Benske (3 years ago)
+Yash Baxi I use Predawn :)
Pod Vader (3 years ago)
Of course i like this video THANKS :D
Patrick Benske (3 years ago)
+Mohamed Ouzanou Haha awesome!
Saviour Gidi (3 years ago)
sorry, have you tested it on phone
Patrick Benske (3 years ago)
+Saviour Gidi Doesn't work on the phone.
Elcid Villegas (3 years ago)
pleas zoom in nxt time.... really hard to see text... but still great vid :D
naveen kumar (3 years ago)
font to bada kr chutiye
It's.AviDeo (3 years ago)
1:32 Enable the subtitle!
jonathan murmu (3 years ago)
thanxxx..... please upload a video on drop down menu also...
Patrick Benske (3 years ago)
+jonathan murmu Maybe ;)
Ashish Rawat (3 years ago)
awesome video......thumb's up.....!!!!!!!
Patrick Benske (3 years ago)
+Ashish Rawat Thanks!
Hafiz Glotar (3 years ago)
Hmm :)
Vinuka Thalis (3 years ago)
OMG THANKS - THIS HELPS SO MUCH!!!
Chita Tande TV (3 years ago)
hey Mate very Nice video You deserve more the like and subscribe
Dmitry Grinko (3 years ago)
Спасибо
Georgi Georgiev (3 years ago)
Thank you very much. GOD bless you and keep you.
Roger Nevez (3 years ago)
The header is covering part of the content. Does anyone know how to fix this?
Richard Essemiah (3 years ago)
+Roger Nevez Give a padding-top on your body element.
Akil CyberZone (3 years ago)
Nice all tutorial :) PixelArts - Design Tutorials is my favourite chenal.
Angela Hannah Aguirre (3 years ago)
thanks!
Yellow House (3 years ago)
Яблоко - говно!
S L (3 years ago)
Can you provide code for a dropdown sub list, please, using your style for the fixed header. My list is working but can't get sublist to work. Thank you!
Allan Winston Ladores (3 years ago)
the div container seems to be cannot fully seen it was cover by the header div. how to display container whole page while header don't cover and moves... (in the last part)
Alexinfo178 (3 years ago)
thank you, your tutorial is very helpful to learn CSS
DJ barZ (3 years ago)
I have a problem. When i want to have more links, they look just like the ones on the nav bar, but obviously i want them to look different. Its because in the .css file its caled "a", so all links look the same. How am i supposed to change it? Can anyone help please? Btw awesome video, i watched all your videos and they are all great!
DJ barZ (3 years ago)
+David Sierra pretty late, but but huge thanks :)
David Sierra (3 years ago)
+canthandlethisshit you can change the format for a specific tag or class, id, etc in CSS. For example, if you wanted to change the color of hyperlinks or <a> tags inside the "header" class (let's assume you want them to be blue) you should type ".header a { color: blue; }" notice the "." period before the word header. The "." is the class selector, so by typing ".header" you're accessing the "header" class, next is the element of said class, in this example "a" refers to hyperlinks, so ".header a" is accessing the "a" element inside the "header" class. Finally, inside the curly braces, you modify the properties of the selected element(s). So, with ".header a { color: blue; }, you're basically telling the compiler "Hey, if you see an <a> tag INSIDE a class called HEADER, i want the text to be blue".

Would you like to comment?

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