Separate menu items by commas instead of spacing?

[mariusjopen]

Hey Sam!

I wrote you the code which you need to insert in the Custom javascript area:

<script>
  window.laytheme.on("newpage", function(layoutObj, type, obj){

    jQuery('#menu-item-8a span').after(",");
    jQuery('#menu-item-16 a span').after(",");
});

</script>

This is a bit of a dirty fix. but since you do not have many menu points it should be all right.

I noticed that on my testserver it needs some time until the commas appear.

I right now found even a better fix because it is pure CSS:

nav.primary a:after {
    content: "," !important;
}

.menu-item-15 a:after {
    display: none;
}

It just removes the laqst comma with a display: none.

Weird, that I did not have this idea from the beginning.

So, no jQuery needed!

I still leave the jQuery example above for other people to understand.

Great! I am happy we solved this!

All the best!

Marius

[sdg]

Yes, CSS works perfectly, thanks so much! I just added color:black.

Much appreciated!

[mariusjopen]

Wonderful!

[ute]

Thank you so much. This helped me too!
just have an additional question. I want the commas to be white on my front page. I already added a piece of code, so that text is white on my frontpage, but the commas are still black.

body.slug-landingpage1 span{
color: white;
}

Would be greatful for help!

Thanks
Stella

http://richterstella.com/landingpage1

[ute]

and is it possible that the commas in the menu just stay, when i hover over them on for example this page?

http://richterstella.com/about

So just the commas are fixed and don't turn white on mouseover.

Thanks so much!

[mariusjopen]

Hi @ute
You need to play with the CSS here:

nav.primary a:after {
    content: "," !important;
color: white !Important;
}

In your example the commas turn white though.

Let me know!

MArius

[Organstudio]

This post is deleted!

[LLukas]

Hi guys, is there a solution to get commas between the menu points on mobile, too? (When "desktop menu style" is chosen)

[paulcalver]

Hi,

I'm trying to achieve a similar menu to this but am not having any luck. aim is to get a / between each menu item, and also a space before and in front, so " / ", the space before the / works, but the one afterwards is being ignored? Also, the last-child part doesn't appear to work either, any ideas are much appreciated?

Thanks, Paul.

nav.primary a:after {
    content: " / " !important;
		color: #494949 !Important;
}

nav.primary li:last-child:after{
    content: "" !important;
}

[paulcalver]

@paulcalver

Figured it out using:

nav.primary a:after {
    content: " /\00a0" !important;
		color: #494949 !Important;
}

.menu-item-1945 a:after {
		display: none !Important;
}