How To Make A Fixed Position Sticky Header With WordPress 2020 Theme. The 2020 theme is a new free theme from WordPress. In this video we are going to demonstrate how to turn a moving header into a sticky, fixed position header, so that it remains in the place when the page scrolls up or down. This can be done with the 2020 theme, I’m just about any other WordPress theme, very easily with a simple bit of CSS code.
For this example, we will be using the Google Chrome browser, I’m using the great inspector tools that come with it. Once you have your site open in your Chrome browser, right click on the header or navber section and select inspect from the drop-down menu. This will bring up the HTML code under the elements tab on one side, and the CSS code under the Styles tab on the other side. We will be dealing with the CSS code under the Styles tab today. Left click the site header on HTML side to enable us to enter the correct CSS for the Heather. In the Styles tab just under the #site-header entry left click to enter some new code. We need to enter position: fixed; that will stick the navbar in place. Now we need to tell it where we want it to stick, so enter another line of code top:0; this will stick it to the top of our page. Next, we need to enter: left:0; to stick it to the left-hand side, then enter the code right:0; to make sure it is expands the full width of the screen. Now we have put the code into the Chrome inspector, when you scroll up and down your page you should notice that the header stays in place.
As we have written this code into the Chrome browser, Once the browser is a refreshed the code will disappear and the site will return to its default non sticky header Style. To make changes permanent we need to actually write them into the theme.
Go to the dashboard of your 2020 theme. Go down to appearance and then customize. Select customize and this will bring up the theme customizer. Scroll down to the bottom and you will see a type called ‘additional CSS’, click on this tab and it will open a box where you can add your custom CSS. From the Chrome browser inspector where we wrote the code earlier, select the code by left-clicking and driving, and hit control C to copy the code. Return to the additional CSS box and paste the code into it. It is a good idea to give you a code a title in between /**/ so that you can find it easier if you happen to ride a lot of code. Once completed hit the publish button at the top to publish your changes. Now preview the site and refresh, you should now have a sticky header on your 2020 theme. That is how to make a fixed position sticky header for this thing or just about any other WordPress theme there is. This is also how to make a fixed position sticky header on a bootstrap or HTML site also. The only difference would be that you would have to write to your CSS into a custom CSS file.
For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.
