Hello! Everyone, Today in this article, I will show you how to add a sticky headercfor Median UI using css.
What is Sticky Header
A sticky header is a header that remains fixed at the top of the page even when a user scrolls down. This is a popular design feature that can enhance the user experience by providing easy access to important navigation links and information. In this article, we will discuss how to create a sticky header for the Median UI.
Add a Sticky Header for Median UI
Adding a Sticky Header for Median UI to your website is a straightforward process that doesn't require HTML or CSS knowledge. I've already prepared a pre-designed codes for you, so all you need to do is copy and paste the provided codes at right place in your Theme XML.
Important! Before we begin adding codes to XML, I highly recommend taking a backup of your theme. If any issues arise, you can easily restore it later on.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: From Blogger Dashboard, select the blog you wish to customize and click on the "Theme" option.
Step 3: This will take you to the Blogger Theme Editor, Click the arrow down icon next to 'customize' button.
Step 4: In the Theme Editor, Click Edit HTML, you will be redirected to editing page.
Don't worry if you're not familiar with HTML; the changes we'll make are simple and easy to understand.
Step 5: Once you're in the HTML editor, Now search the code ]]></b:skin> or </style> and paste the following CSS just above to it.
You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.
header{position:sticky;border-bottom:0}
Step 6: Save the changes by clicking on this icon
After Save your CSS code and open your web page in a browser. Scroll down the page and verify that the header remains fixed at the top of the page.
Conclusion
Creating a sticky header for the Median UI is a simple process that can greatly enhance the user experience on your website. By following the steps outlined in this article, you can easily create a sticky header that remains fixed at the top of the page, providing easy access to important navigation links and information.