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.

Replies

14
  1. Andrew Misplon Staff 10 years, 3 months ago

    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 10 years, 3 months ago

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

  3. Andrew Misplon Staff 10 years, 3 months ago

    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 10 years, 3 months ago

    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 10 years, 3 months ago

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

  6. mail box 10 years, 3 months ago

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

  7. Andrew Misplon Staff 10 years, 3 months ago

    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 10 years, 3 months ago

    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 10 years, 3 months ago

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

  10. Andrew Misplon Staff 10 years, 3 months ago

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

    All the best.

  11. mail box 10 years, 3 months ago

    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 10 years, 3 months ago

    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 10 years, 3 months ago

    thanks, it is ok now

  14. Andrew Misplon Staff 10 years, 3 months ago

    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