Home>Support>use file as menu separator

use file as menu separator

By mail box, 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].

I added a / as menu separator, but even with thickness 100 i think it is to thick, so i created a .png file with a thin /.
How do i get this file to show between the menu items?

URL: http://delandyn.sierink-wp.nl

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, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi :)

    Try the following at Appearance > Custom CSS, adjust as required:

    /* Main Menu */

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

.main-navigation ul li:last-of-type a,
.main-navigation ul ul li a { 
	border-right: none;
}
  2. 9 years, 7 months ago mail box

    That works fine and the line is thin, but is it also possible to have a / iso |?

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    You could try something like this instead:

    /* Main Menu */

.main-navigation ul li a:before { 
	content: "/";
  position: absolute;
  right: 0;
}

.main-navigation ul li:last-of-type a:before,
.main-navigation ul ul li a:before { 
	content: none;
}
  4. 9 years, 7 months ago mail box

    That is what i did before, then the / is too thick. So i made a .png file with a /. I was trying to get this png as a background of the menu-item so it looks like there is a / between them.

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Please, provide the URL to your image file and I’ll take a look. Thanks.

  6. 9 years, 7 months ago mail box

    http://delandyn.sierink-wp.nl/wp-content/uploads/2015/11/separator.png

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

    Sure. Something like this:

    /* Main Menu */

.main-navigation ul li a:before { 
	background: url("http://delandyn.sierink-wp.nl/wp-content/uploads/2015/11/separator.png") no-repeat;
  display: block;
  content: "";
  height: 49px;
  position: absolute;
  right: 0;
  top: 0;
  width: 19px;
}

.main-navigation ul li:last-of-type a:before { 
	background: none;
}
  8. 9 years, 7 months ago mail box

    Andrew, thanks again. It looks perfect, except when hovering over the menu item the ‘hover box’ is displayed over the separator. Any solution to that?

  9. 9 years, 7 months ago mail box

    Sorry, should have figured that one out myself.
    Changed padding to 0px and added some margin, looks fine now

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

    Sweet :) Glad to hear you were able to resolve.

    All the best.

  11. 9 years, 7 months ago mail box

    I run into the problem that the separator is also displayed in the submenu.
    I already made some custom css

    .main-navigation ul ul a {
   background: none !important;
}

    but that did not work

  12. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    It would need to match the original selector, just with another ul added:

    .main-navigation ul ul li a:before {
background: none;
}

    Hope that helps.

  13. 9 years, 7 months ago mail box

    thanks, it is ok now

  14. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Cool :)

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