So @vintagelovedesigns asked for a tutorial on how to make a full screen header with a scroll down button, so here you go ^^
The result will give you the bare bones for something like this:
(Graphic made by the lovely @saturnthms !)
The Meta Tags
The only thing you need to add in the meta tags is this line:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells you the size of the browser window when a user first accesses it, and it is necessary to make the header stretch all the way across the screen. It should be put in between <head> and <style>, just like all the other meta tags.
The HTML
Now I know Iâm doing this a bit out of order, but you need to define your header element first before you can add any CSS to it.
You should put your header element right after your <body> tag, so itâll physically be on the top of the screen. As for the header element itself, I usually use the <header> tag itself, like so:
<body> <header> <!-- in here is where your header content will be --> </header> </body>
Now, all that needs to be added is the HTML for the âscroll downâ button, which should be inside the header.
<header> <!-- in here is where your header content will be --> <a href="#" class="down"> <!-- your scroll down button --> <!-- whatever you want your scroll down button to say --> </a> </header>
The CSS
Now that youâve defined your header element - whether with the <header> tag or something else - itâs time to add some CSS to it. This will determine what the header will actually look like. Iâm just going to tell you the basics for the CSS, and youâll have to figure out what style you want for the rest. You should put this between <style> and </style>
So to your header element, you should add this (Iâm using header as an example, because thatâs what my header element is):
<style type="text/css"> header { Â width:100%; /* makes sure it stretches across the screen horizontally */ Â height:100vh; /* makes sure it stretches across the screen vertically */ Â margin:0; /* just to make sure you don't have any extra borders */ Â overflow:hidden; /* in case your header overflows, this will hide that */ } </style>
You can style the âscroll downâ button by putting something inside the designated element, and adding CSS to .down { }, same as you did for the header.
The JQuery
All thatâs left now is the script that actually makes the clicking the button scroll the screen down. For this to work, you must have a JQuery library in your code, so be sure to have that first. The one I use is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Itâs best if you add that between <head> and <style>, if you donât already have that. After youâve added a JQuery library in your code, paste this between </body> and </html>
</body> <script type='text/javascript'> $(document).ready(function(){   var height = $(window).height(); // defines the height you want to scroll, in this case the height of the window   $('.down').click(function(){ // the selector + what happens if you click on it     $('html, body').animate({scrollTop: height }, 1100); //scroll for the predetermined amount     return false; // negates the href="#" of the link   }); }); </script> </html>
The $(â.downâ) should match the class you gave your âscroll downâ button!
The End
And thatâs it! Thatâs the bare bones for the effect I showed at the beginning. Your code should look a little something like this:
You can see the same effect in my theme Winter, Summer Night Horizon, and my blog theme (if you press the âenterâ button itâll scroll down). Now if you want a tutorial on how to only have it show up on the first page, @roxiestheme made a tutorial on that here.
If you use this tutorial I would like a little credit somewhere on your theme, not gonna lie. But only an in code mention would be fine, nothing big ^^
