Custom Menu Separators

pcather · January 22, 2014

Is there a way to change the menu Separators to something other than a line? Say a dot or diamond?

Thanks.

snakeey11 · January 23, 2014

pcather wrote: »

Is there a way to change the menu Separators to something other than a line? Say a dot or diamond?

Thanks.

Yes, this can be accomplished via custom CSS; in fact I do this very thing on my site to add bullet points as the item separators:

.sm-page-widget-nav-toplink > a::after {
  content: '\2022';
  /* other styling as desired... */
}

/* don't put a separator after the last item in the menu */
.sm-page-widget-nav-toplink:last-child > a::after {
  content: '';
}

-Mike

pcather · January 23, 2014

Mike,

Thanks so much for your reply. These worked except, unlike your site, the dot is not centered between each menu link. See here http://reflections-etc.smugmug.com/

Do you have any ideas on how to fix these?

Thanks,
Pamela

snakeey11 · January 23, 2014

pcather wrote: »

Mike,

Thanks so much for your reply. These worked except, unlike your site, the dot is not centered between each menu link. See here http://reflections-etc.smugmug.com/

Do you have any ideas on how to fix these?

Thanks,
Pamela

It looks like you don't have that CSS active on your site at the moment, but you are correct in that I had to add an additional margin to the pseudo element in order to center it, so my full CSS looks like this:

.sm-page-widget-nav-toplink > a::after {
  color: #636363 !important;
  content: '\2022';
  margin-left: 10px;
  position: absolute;
}

.sm-page-widget-nav-toplink:last-child > a::after {
  content: '';
}

Hope that helps!
-Mike

Custom Menu Separators

Comments