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.

use file as menu separator

Resolved 14 replies premiumthemetheme-vantage
mail box
Started · Latest reply by Andrew Misplon

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.

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Andrew Misplon Staff

    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. mail box

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

  3. Andrew Misplon Staff

    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. 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. Andrew Misplon Staff

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

  6. mail box

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

  7. Andrew Misplon Staff

    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. 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. mail box

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

  10. Andrew Misplon Staff

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

    All the best.

  11. 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. Andrew Misplon Staff

    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. mail box

    thanks, it is ok now

  14. Andrew Misplon Staff

    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.

Have a different question or issue?

Start New Thread