How can I change the menu here so that it's always there when the user scrolls down the page?
What code do I need to add/ remove/ replace and where?
Your HTML isn't good. You didn't close your <section id="header" class="clearfix">
and many more. Run your page throught HTML validator, it will tell you your errors.
As for your question, just add:
#header{
position:fixed;
}
In your CSS file (style.css).
More about positions : MDN positions.
here is an example of a div which stays in the same position at all times on the screen.
To fix an element you can use the position fixed, and then position the element on the visible browser window by using the css top, bottom, right and left.
in this example it is fixed to top left, and has a height of 25px
<body>
<div style="position:fixed; top:0; left:0; height:25px; width:100%;">
Here you will get a bar which is fixed to the top left experiment to get your desired effect
</div>
</body>
Simple solution for your case is to use
<section id="header" style="position:fixed;" class="clearfix">
and add a
</section>
before the
<!-- header ends --!>