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

Collapsing Header Tutorial | HTML & CSS

4203 ratings | 495722 views
This collapsing header effect is really easy to achieve with a simple lines of CSS. Liked this video, why not 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: patrickbenske.com Facebook: http://goo.gl/R6ZwgF Twitter: http://goo.gl/oYIaWa
Html code for embedding videos on your blog
Text Comments (298)
Zolido Network (2 months ago)
This is good ! I subscribed.
Roshan Jafri (5 months ago)
misleading title ...
Rao Awiii (6 months ago)
Awesome
DEEPAK SINGH RAWAT (7 months ago)
Time West
Aaron Riksen (8 months ago)
Your site isn't existing anymore. Could you bring it back?
Patrick Benske (8 months ago)
My new one is patrickbenske.com
izolepa (8 months ago)
Its just called parallax
Played By Sphinx (9 months ago)
how to sync html with css on notepad++?
IvanH (9 months ago)
ooofff, do something about the sound, after 2 minutes i've had enough of that thumping keyboard sound. srry
AJAY Verms (10 months ago)
is that parallax effect.... well the header is fixed and div background attachment is fixed...
shravan (10 months ago)
hello sir you can give directly background-attachement:fixed ------unsubscribe
Karloo (1 year ago)
But why container always, can i call it different?
Ricky Jewish Flores (1 year ago)
More front end tutorial bro Nice Video
aryan sharma (1 year ago)
Hey my content is hiding inside menu bar
Aashu ji (1 year ago)
this was not up to the mark bro
Comic Teller (1 year ago)
joss bro.. please make more video like this Thanks
Queen Isar (1 year ago)
thank you sir.. very nice video :) GOD BLESS YOU....! from India
Faiz0rr (1 year ago)
litteraly just: <nav class="navbar navbar-inverse navbar-fixed-top">, enjoy
John Carl Leseniana (1 year ago)
what if it is a image??
NathanJemison (1 year ago)
Best lorem ipsum ever
MAU (1 year ago)
this is nice but i had a footer that would always stay at the bottom until the content ended and now the footer is messed up because i added this header and now you can go underneath the footer
MAU (1 year ago)
nvm i fixed it
hgahsiea (1 year ago)
This is not a collapsing header. Ugh.
CodeCompete Repeat (1 year ago)
Why u give content div position relative ?
Forensic (1 year ago)
Why is there stuff written already inside your style.css? Mine is empty.
Catherine Joy Galias (1 year ago)
after doing all of your codes both html and css... it doesn't work ....the image header was fixed yes ,but the second image was moving behind it....maybe there is something missing on your code..
Mark Lozano (1 year ago)
baduyyyy...
CodeCompete Repeat (1 year ago)
it was cool!!
Arcade Warehouse (1 year ago)
my header doesnt have the dark backround line
Canra Sun (1 year ago)
thankyou.
fawkthescene666 (1 year ago)
Anyone else catch "I saw beyonces tizzles and my pizzle went crizzle"? Lol. Cool tutorial, though.
to gooooooooooooooooooooooooooo d
A K (1 year ago)
thanks for your videos......provide source code.....
Christoffer (1 year ago)
I'm glad that /> isnt nessicairy anymore, it looks so wierd
Heta YouTubers (1 year ago)
Why is there keyboard noise even if you are not typing?
Krishy G (2 years ago)
how do you center the text into the middle of the banner itself, not the text-align
Alex (2 years ago)
Thank you. This helps.
Daniel Filipkowski (2 years ago)
why did you put all the elements at the top with the body to set the margin padding and borders instead of the universal tag *{}
Schwarzenwein (2 years ago)
Hey, Great video! Can u please make a tutorial on creating a slider?
ᏇᎥᏝᎦ (2 years ago)
can you provide the source code for me? thankyou!
Jose Mejia Baez (2 years ago)
Hey! Whats up with the banner, I cannot increase the height of my banner. why is that?
Draven Draaaven (2 years ago)
From where can i take imagine at 1:10 ?? Btw nc video.
Aeron Garcia TV (2 years ago)
My header, banner,content didn't go to center? why?
shamir hamzah (2 years ago)
margin auto
CodingTuts (2 years ago)
How did you get sponsored by mediatemple?
David Billingsley (2 years ago)
Hey Patrick, for later use with Emmet Coding, when you do <div id="container"></div>. When I learned it from Mr. Bravo, he put it as div . period for class, # for id. Then hit the tab key. Examples. div#container then tab. div.container then tab.
MeiHoonGamer (2 years ago)
man u solved my biggest confusion dude....!!!!!!!!!!! thx a lot:::::::
vimush effort (2 years ago)
nice
ali farooq (2 years ago)
what the shit fuck is this ....................... wrong title
Peter Bou Saada (2 years ago)
i can't believe people need tutorials for this... this is some easy shit boy
Jéff Máthew (2 years ago)
Dude you make way too many typos. It's so annoying how you don't realize it at the moment.
Simplex21 (1 year ago)
This was just his opinion.Thank you for the tutorial! It helped me a lot.
Jéff Máthew (2 years ago)
Wasn't trying to be negative, lol. The tutorial itself was decent. I was just pointing out a minor flaw that annoyed me.
Patrick Benske (2 years ago)
Jéff Máthew Go learn somewhere else then, no need for negativity :)
Thandu Chanikya (2 years ago)
hhow to reduce header size while contetn scrolling up
Luke Dawson (2 years ago)
hey, i have an image in my banner and even with "background size - cover" it cuts off half of my image :/
Norb Ginzburg (2 years ago)
Thank you so much for this tutorial !!
jason sech (2 years ago)
This wont work for me me if the banner CSS line code has a fixed position.
Oscar Mvuria (2 years ago)
Where can i find the template that you have used? Great stuff though thanks
DodieZero (2 years ago)
I don't get it?? My content and banners scrolls over the header which hides my Nav bar
DodieZero (2 years ago)
Frank Dvorak can't remember.. but I followed this video during a Web designing Conpetition last november 😂😂😂
Frank Dvorak (2 years ago)
It's not because z-index value is it? :)
Gaber Said (2 years ago)
? What is the difference between id and class
Joel de la hoz (2 years ago)
Gaber Said Id is only for a unique thing, a class can be repeat, for example you need to do a section background you can use a id <section id=bg1 ></section> you can't repeat the same id. a div with a class <div class="colortext"></div> can be use all times do you Want. ¡Saludos!
Minh Le (2 years ago)
Great video! Thank u so much!
tio borracho (2 years ago)
Beautiful in it's simplicity! Thank you. (Though you may want to correct the title. LOL)
dfigames slayer (2 years ago)
I was waiting for you to change the backgrond to background but seem you didn't see it :(
Ayush Draws (2 years ago)
Hey I didn't use Emmett or anything but I followed everything in the video but at the end when I open my .html file nothing shows..... so pls help guys!!
miol kookie (2 years ago)
yeah, mine also didnt work :(
Robert Domeier (2 years ago)
send me your code
Vinod P (2 years ago)
In index.html "(#container>header>h1)+(#banner>h2)+(#content>p)" type this out without the quotes and press tab. Emmet is more helpful than how you used it, After that,type the text you need and press tab, it takes you to next place you need to type the text :D . In CSS, #banner has a typo for the property "background" . Cool vid :)
Jochem Brandsma (2 years ago)
First thing you wanna do is.. Activate that windows boyyy
Ryan Galloway (7 months ago)
Man why you gotta be so savage
irepscotland (1 year ago)
Am fuckin dead mate =))))))))))
Heta YouTubers (1 year ago)
Lmao I also have that annoying watermark
Patrick Benske (2 years ago)
Hehe
VRP Tutorials (2 years ago)
HELLO CAN U TELL ME WHICH BEST OS FOR WORKS FOR WEB AND GRAPHICS WINDOWS 10 OR 8 OR 7 PLEASE TELL ME YOUR OPINION
VRP Tutorials (2 years ago)
tnxs which is your country
VRP Tutorials (2 years ago)
thnx sir
GReeN (2 years ago)
anything
daniel halachev (2 years ago)
That was very helpful. I had been looking for this for quite a while!
Daniel Frick (2 years ago)
How do you position the footer? my footer isn't displaying properly.
Fierce Deity (2 years ago)
How did you auto populate the html skeleton ?? Did you just write html:5 enter??
DOUBLEPLAYER3 (2 years ago)
Hey. I see that in the style.css file you have, the first code you have is declearing the site border, padding and margin to 0. But instead of writing all these tags, you can actully just use this "*". Here's an exemple: *{ border: 0; padding: 0; margin: 0; }
DOUBLEPLAYER3 (2 years ago)
No problem:)
cmyer823 (2 years ago)
Thank you! This totally fixed the problem I was having
Iacovenco Vlad (2 years ago)
This was really interesting, thank you :-) Can u upload the code also, please? Thanks!
Zoe D (3 years ago)
Why did he define the body div h1 h2 h3 img ol li ... etc. as padding 0 margin border 0 ??? I've seen this before but instead using "*" Should I always use that at the beginning of all my CSS files?
Patrick Benske (2 years ago)
That is right!
Samuel Harrison (3 years ago)
I believe it's because those elements have a default margin/padding which is not set to 0. Therefore some people prefer to copy'paste those attributes to ensure they are working from a 'blank canvas'.
Bruno Gonçalves (3 years ago)
dude how do u center the text in the header?
DOUBLEPLAYER3 (2 years ago)
text-align: center
sanjay ram (3 years ago)
thank you
Patrick Benske (2 years ago)
:)
Laura Alicia (3 years ago)
Thank you so much! great help, truly appreciate your effort! :D
Patrick Benske (2 years ago)
Aww, you are too kind.
Richard (3 years ago)
Sublime text + emmet, first tutorial I have seen using this combo, this is what I always use :) but I do not know how to use emmet at all, thanks for the info on html:5 for a blank template. Though personally I think there is not a lot to be learned by a tutorial like this without explaining what fixed position does or why your using it where etc.
Peach-Seedz (2 years ago)
An example of using emmet would be <li*5 then press the tab button. This combo would make 5 sets of <li></li>
Patrick Benske (2 years ago)
Thank you for the feedback :)
wohfab (3 years ago)
You should activate your windows :D
Patrick Benske (2 years ago)
I switched to mac now :/
Albert Lorenzo (3 years ago)
Just a fixed nav
xell (3 years ago)
what is a basic html5 structure? sorry im new to this is anyones reading.
DOUBLEPLAYER3 (2 years ago)
<!DOCTYPE html> <html> contains header and body <head> this section contains settings and the title of the website </head> <body> this is what that is displayed on the site </body> </html>
Jean Chrinot (3 years ago)
Great job!! You're amazing man!! :))
Black Tiger (3 years ago)
Tutorial is wrong. It's "fixed header", not "collapsing".
Jaswanth Chadalavada (3 years ago)
header as in header h1
jon pryor (3 years ago)
Great guide and please keep the content coming!
fred owusu (3 years ago)
Great video. .pls how will you add a footer to it...I tried but it is stuck to the bottom.
Raghu nadh (3 years ago)
Good
Joshua Wang (3 years ago)
Amazing tutorial. You didn't use Javascript, which was great, because then I understood it WAY more. This is totally different and unique, and I love it! Thank you so much for this!
Joshua Wang (2 years ago)
Great! Can't wait for them!
Patrick Benske (2 years ago)
Thanks :) New videos planned. Have to get back on track.
Joshua Wang (2 years ago)
Your welcome! :D Keep the good work up!
Patrick Benske (2 years ago)
Awesome. Love it thank you!
Sumit Majumdar (3 years ago)
Unregistered Sublime Text and Windows not activated. Seriously, you are brave.
Patrick Benske (2 years ago)
That's how I roll.
noor lado (3 years ago)
Great tutorial :) in your example website ur navbar height is also change please tell me how its work ?
Farkhod Kuchkarov (3 years ago)
Great Job Dude That's so beautiful! Respect
Jade Parkin (3 years ago)
Mine doesn't collapse :/. Any ideas why?
Francisco Fdez (3 years ago)
is your website down?
Aamir Pathan (3 years ago)
great video..!!!!
404-Code Not Found! (3 years ago)
Thank's Again :)
Abdul alim Hassan (3 years ago)
how would you put a image in your header?
DOUBLEPLAYER3 (2 years ago)
use the <img> tag and give it an ID, then size it and float it to left in css
Dor Shiff (3 years ago)
How you adding the footer down there?
autoAim (3 years ago)
<footer></footer> on the html page at the bottom
Pierre Myx (3 years ago)
For applicate margin:0px; at all elements, you can write : *{margin: 0;}
Tombion (3 years ago)
When I ad a navagation bar the letters will dissapear if I scroll up. please help.
ZoommaiR (3 years ago)
Title is "collapsing header," your example the header collapses, but your execution the header is just fixed. Title should read "collapsing banner," not header, because that's essentially what you're teaching here.
Erick Hwang (2 years ago)
Lol its just a name either what shit you name it
Asperanik (3 years ago)
isnt brackets better?
ralph julian rodriguez (3 years ago)
Thanks Bruh!!! :)
imagine 1982 (3 years ago)
thank you.
Sharvan Gopaul (3 years ago)
hyy mate ...... can i get full coding of your website? :P
Max van Oldeniel (3 years ago)
+Sharvan Gopaul ever heard of element inspect?
your web page doesn't work:( (Wanted to see how you made it! )can you make a tutorial on how you made collapsing slider parallax effect? like on your web page what wee saw in video 1:07
Ivarr Reyna (3 years ago)
How can i put on a footer? i tried with position: fixed, then bottom and with relative, but none of them worked. Could you help me out? I am kinda new to HTML and CSS.
digimon teamjacob (3 years ago)
The code in the video did not go to the top and did not go to both sides of the page when I used it. Here is the modified code I used that fixed that for me. Just in case someone else has the same problem. Hope this helps. PS Thanks for the tutorial it was very helpful. HTML: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="ANewStandardEDUHomepage.css" rel="stylesheet" /> <title>Collapsing HeaderEffect</title> </head> <body> <div id="container"> <div id="header"> <header> <h1>This is my Header</h1> </header> </div> <div id="banner"> <h2>This is my banner</h2> </div> <div id="content"> <p>Content ges here</p> </div> </div> </body> </html> CSS: html{ padding: 0; margin: 0; border: 0; } body{ padding: 0; margin: 0; border: 0; } #header{ position:fixed; top:0px; height: 100px; background: #dbdbdb; width: 100%; z-index: 10; } #banner { width: 100%; height: 500px; position: fixed; top: 100px; background:#707070; } #content{ width: 100%; position: relative; top: 400px; background: #ebebeb; height: 1500px; position: center; }
Roumen1 (1 month ago)
Thank you man, you are my Hero!
Ivan Mitov (9 months ago)
To set "top" position or z-index if needed. Same can be done with margin-top ot padding-top.
CodeCompete Repeat (1 year ago)
Why content position is relative??
Honza Green (3 years ago)
+SmellyStudios hes specifying a div id you do that with a hashtag # class with a period .
Quasar (3 years ago)
+digimon teamjacob you shouldnt put a hashtag before the header at the css section !!!

Would you like to comment?

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