How to create another floating header by WebDOZE on YouTube

 This is the second tutorial I'm trying from another youtube transcript Ai conversion.  ChatGPT saved me some annotated notes here and sometime. I'm testing this now.

https://www.youtube.com/watch?v=hClMHp1CSec

Check out the video if you want to have your carrd.co navigation sticky.
Article: https://www.bitdoze.com/add-stickey-h...
Carrd: https://go.bitdoze.com/carrd
Carrd Review:    • Carrd.co Review: The Best Budget Land...  
Playlist:    • Carrd.co 

Tutorial: Adding a Sticky Header/Navigation Menu to Your Carrd Website

Introduction

Hello, and welcome to this tutorial where we will explore how to incorporate a sticky header or navigation menu into your existing Carrd website. If you're unfamiliar with Carrd, it's a one-page website builder known for creating sleek and stylish websites. If you haven't checked out Carrd yet, you can find more information in my previous video [link to previous video].

To create a sticky header, you'll need at least the Pro Standard plan, as we'll be utilizing embed widgets. The Pro Plus plan is not necessary for this tutorial. Let's get started by adding a sticky header to your Carrd website.

Step 1: Adjust Page Settings

1.1 Open your Carrd editor and navigate to the page settings.

1.2 Set the padding for the page to zero. This ensures that the positioning of the header remains intact.

Step 2: Identify Container ID

2.1 Use your browser's inspector tool to identify the ID of the container that holds your header. This is crucial for applying the sticky effect.

2.2 In the inspector tool, locate the div for your header, and note the ID (e.g., container01).

Step 3: Add Sticky Header Code

3.1 Go back to Carrd editor and add an Embed element to your template.

3.2 Name the embed (e.g., "sticking-inline").

3.3 Paste the following CSS code into the embed:

css

<style>
#container01 {
    position: sticky;
    top: 0;
    z-index: 100;
}
</style>

Step 4: Adjust Space for Header

4.1 To prevent content from overlapping, add a divider or another element above your header.

4.2 Set the margins and transparency of the added element to create the desired space. This ensures a clean and visually appealing design.

Step 5: Make Header Sticky on Mobile (Optional)

5.1 If you want the header to remain sticky on mobile devices, copy the second code provided in the tutorial.

5.2 Add a new Embed element and paste the second code without the media screen query.

5.3 Adjust margins and styles to suit the mobile layout.

Step 6: Test and Optimize

6.1 Save your changes and preview the website.

6.2 Test the sticky header functionality on both desktop and mobile devices.

6.3 Adjust margins, styles, and other settings as needed to optimize the appearance.

Conclusion

Congratulations! You've successfully added a sticky header or navigation menu to your Carrd website. Feel free to customize the design further based on your preferences. If you found this tutorial helpful, please subscribe and like the video. If you have any questions or need clarification, leave a comment below.

Thank you for watching, and I'll see you in the next tutorial!