Step 1. Identify your navigation div's iD or class

In your browser, go to your published website. Right click on your navigation, click "Inspect Element", and obtain the ID or Class of your navigation's div.

For this specific theme, the navigation's div uses an ID named "nav". When we use this later for CSS, we'll simply call it like this: "#nav". If this theme was using a Class instead of an ID, then we would call it like this: ".nav".

---

Step 2. Open Weebly's HTML/CSS editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

Step 3. Add CSS code

On the left, click on "main_style.css". On the right, scroll down to your navigation menu's CSS codes. Add the codes below to the CSS file. Be sure to replace the code in orange with the ID or Class you obtained in Step 1.

​#nav ul li {
    border-left: 1px solid #d0cfcd;
}

#nav ul li:first-child {
    border:0;
}

Click save.

---

You're done! Publish your site to see your navigation's upgrade!

---

Tips & additional information

If you need to change the height of the vertical lines, you'll simply need to adjust the top and bottom padding of all the navigation menu items. This can all be done at once by going back into your CSS file and looking for the code below in the navigation code area (if you can't find the exact code below, look for a code that ends with "a"). You can adjust the padding by changing the first number in orange.

.wsite-menu-default a {
    display: block;
    padding: 0px 15px; /* Used to be 15px */
    color: rgba(255, 255, 255, .65);
    font-family: "Ubuntu";
    font-weight: bold;
    text-transform: uppercase;
}

---

comments powered by Disqus