Home>Support>use file as menu separator

use file as menu separator

By mail box, 10 years ago. Last reply by Andrew Misplon, 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].

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. 10 years, 15 days 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. 10 years, 15 days ago mail box

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

  3. 10 years, 15 days 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. 10 years, 15 days 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. 10 years, 14 days ago Andrew Misplon
    Hi, I Work Here

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

  6. 10 years, 14 days ago mail box

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

  7. 10 years, 14 days 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. 10 years, 14 days 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. 10 years, 14 days ago mail box

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

  10. 10 years, 13 days ago Andrew Misplon
    Hi, I Work Here

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

    All the best.

  11. 10 years, 7 days 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. 10 years, 7 days 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. 10 years, 7 days ago mail box

    thanks, it is ok now

  14. 10 years, 7 days 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