Tutorial Stats
How To Create A Sticky Or Fixed Navigation Bar In Weebly
Tutorial Description
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: This tutorial will only work for navigation bars that are at the top of the page.
Note: This tutorial will only work for navigation bars that are at the top of the page.
SHOW MORE
Tutorial
Step 1. Find your navigation bar's Div
Right click on your navigation bar, click "Inspect Element", and identify your navigation'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.
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
Click on "Design" at the top of the page and then click "Edit HTML/CSS" on the bottom-left.
Step 3. insert html code
Click on "main-style.css" on the left and then scroll down to find the "<div>" we found in Step 1. For this website, the "<div>"'s id is "#prehead".
Add the orange code to the "<div>" we found in STEP 1.
#prehead {
width:100%;
background:#000000;
border-bottom:1px solid #666;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
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%.
Add the orange code to the "<div>" we found in STEP 1.
#prehead {
width:100%;
background:#000000;
border-bottom:1px solid #666;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
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".
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.
#wrapper {
width: 1000px;
margin: 0 auto;
padding-top:50px;
}
Click save.
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.
#wrapper {
width: 1000px;
margin: 0 auto;
padding-top:50px;
}
Click save.
You're done! Publish your site to see your floating navigation bar!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
