How To Create A Sticky Or Fixed Navigation Bar In Weebly
Details of Project
Time to complete: 20 Minutes
Note: This tutorial will only work for navigation bars that are at the top of the page.
Step 1. Find your navigation bar's Div
For this example, the navigation's div is "#prehead". We need this knowledge so we know which code to edit in the CSS file.
Step 2. Open Weebly's HTML/CSS Editor
Step 3. insert html code
Add the orange code to the "<div>" we found in STEP 1.
border-bottom:1px solid #666;
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
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
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.
margin: 0 auto;
You're done! Publish your site to see your floating navigation bar!
NEED A NEW WEEBLY THEME?
WE'VE GOT YOU COVERED!
NEED HELP CUSTOMIZING YOUR WEEBLY SITE?
WE CAN HELP!
"Appreciate all of your help in getting everything just right!"
"Chris from Weebly Tricks is AMAZING!! I would definitely use his services again."
"...he [Chris] worked long and late hours to see that I was pleased."