Home>Support>Navigation Bar Menu customization

Navigation Bar Menu customization

By Wawale, 10 years ago. Last reply by Magus, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi!

1. I would appreciate very much if you can tell me how to have a vertical line between buttons on the navigation menu? Like this : Home I About I Services I Contact

2. How can I have the menu with a top and bottom horizontal border (in dots) and no background color?
……………………………………………………………
Home I About I Services I Contact
……………………………………………………………

Thank you in advance for your help!
Diane

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 5 months ago Magus
    Hi, I Work Here

    Hi Wawale

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    For the dotted borders

    .main-navigation {
    border-top-color: #000;
    border-top-style: dotted;
    border-bottom-color: #000;
    border-bottom-style: dotted;
    border-bottom-width: 0.75px;
    border-top-width: 0.75px;
}

    Change the colours to match your theme.

    for the vertical bars

    .main-navigation ul li {
border-right: 1px solid #000;
}

.main-navigation ul li:last-of-type {
border-right: none;
}

.main-navigation ul ul li {
border-right: none;
}

    Let us know how you get on

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More