How to create sticky (floating) menus by LAUNCHfyi (on youtube)

 I decided it was important for me to take notes from these lovely tutorials on Youtube, and what better way to do it than with time-saving ChatGPT.  Please be warned, I'm testing these articles myself after pasting them from Ai, so user-be aware. As of 12/18 noon, this tut doesn't work for me yet. So I'm moving onto another.  Apologies if steps were skipped or if something is unclear.  Thanks to LAUNCHfyi for these instructions:

How to create a sticky navigation menu bar in Carrd.

Get the code here: https://www.notion.so/
Copy the Carrd Template (Free) - https://carrd.co/build/
Get Carrd - https://try.carrd.co/

Tutorial: Building a Sticky Navigation Bar with Carrd and CSS

Introduction

Hello and welcome to another tutorial by LAUNCHfyi! In this tutorial, I'll guide you through the process of creating a sticky navigation bar using Carrd and a bit of CSS. By the end of this tutorial, you'll have a website where the navigation bar sticks to the top as you scroll down, creating a sleek and modern design.

Demo Site Preview

Before we start, let's take a quick look at the demo site we'll be building: Demo Site (Replace with your demo site link)

Step 1: Create the Carrd Project

1.1. Open Carrd and create a new project.

1.2. Set up your main content and ensure your header is within a container.

1.3. In the container settings, set the container to full screen with zero margins.

Step 2: Adjust Vertical Padding

2.1. Leave enough space between the start of your main content and the header.

2.2. Increase the container vertical padding to match the space between the main content and the header. Alternatively, you can use a divider to create space.

Step 3: Add Sticky Navigation Code

3.1. Scroll down to the bottom section or the footer.

3.2. Add an "Embed" element using the plus sign (+) in Carrd.

3.3. Label the embed element appropriately (e.g., "banner top" for the header and "banner bottom" for the footer).

3.4. Insert the following CSS code into the embed element:

css (TOP)

<style>
#bannertop {
position: fixed !important;
z-index: 99;
top: 0;
}
</style> 
 
 
 
CSS (BOTTOM)

<style>
#bannertop {
position: fixed !important;
z-index: 99;
bottom: 0;
}
</style>

Step 4: Apply IDs to Header and Footer

4.1. Go back to the container settings of the header.

4.2. Under the "ID" field, give it the same name you used in the CSS code (e.g., "banner-top").

4.3. For the footer, follow the same process, ensuring the ID matches the CSS code (e.g., "banner-bottom").

Step 5: Customize and Experiment

5.1. Feel free to customize the CSS code to match your design preferences.

5.2. Experiment with additional elements such as buttons, images, or text within the sticky navigation bar.

5.3. Adjust the styling, size, and layout to suit your website's aesthetic.

Conclusion

Congratulations! You've successfully created a sticky navigation bar using Carrd and CSS. Don't hesitate to explore further and add your personal touch to enhance the design. If you have any questions or need clarification, feel free to ask in the comments.

Thank you for following along, and be sure to check the video description for the Carrd template and CSS code used in this tutorial. If you found this tutorial helpful, please like the video and consider subscribing for more weekly CSS tutorials.

Happy designing!