Home>Support>make line between menu items shorter and vertically centered

make line between menu items shorter and vertically centered

By justeatorganic, 9 years ago. Last reply by Andrew Misplon, 9 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,

I recently used a CSS code by one of your employees on another post to add lines between menu items.

.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;
}

I was wondering if those lines can be a bit shorter in height?

URL: http://justeatorganic.com.au/

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

  1. 9 years, 10 months ago justeatorganic

    Also, how can i change the colour of the lines ? i want them orange like my menu items

  2. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Justeatorganic

    The value in your Custom CSS above, #000, controls the color. You can insert any hexadecimal color value in its place.

    To make the lines smaller you’ll need to make the menu items smaller and then add the same space back via the main menu container. Try the following:

    .main-navigation ul li a {
    padding-top: 5px;
    padding-bottom: 5px;
}

.main-navigation {
    margin-top: 10px;
    margin-bottom: 10px;
}

    Adjust as required.

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