This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Navigation Bar Menu customization

10 years ago · Last reply by Magus 10 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Magus Staff 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread