This tutorial will show you how to create a sticky or fixed navigation bar in Weebly. Creating a sticky or floating navigation bar will keep your navigation bar stationary even when a person scrolls down the page.
Note: If you're making the navigation bar from this tutorial, you'll also need to change the width of the code above to 100%.
Step 4. Find the div below the navigation bar's div
If you publish your site now, which you can, you'll notice that the top part of your website is cut off. This is because the navigation bar is now floating. We've isolated it from the rest of the website site, so now the rest of the website fills in the space where the navigation bar once was.
To fix this, we need to find the "<div>" beneath the "<div>" we located in Step 1.
Right click on your navigation bar, click on "Inspect Element", and locate the "<div>" beneath your navigation bar's "<div>". In this case, the "<div>" we need has the id "#wrapper".
Step 5. Add css coding
Go back to Weebly's HTML/CSS Editor (STEP 2), click on "main-style.css" on the left, and scroll down to the "<div>" we found in STEP 4. For this website, the "<div>" we're looking for has the id "#wrapper".
Add the orange code to the "<div>" you've located for your website. You may need to change the green code to a higher or lower number depending on your website's design.
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.