Separate menu items by commas instead of spacing?

[sdg]

I would love to be able to separate menu items by commas. For the normal view it works to just add a comma to the navigation labels, but this messes up the mobile/tablet view, where the items are on separate lines. Is there a workaround for this?

[arminunruh]

hey!

You can use css! Pls go to "Lay Options" -> "Custom CSS & HTML" -> "Custom CSS for Desktop Version" and enter:

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

you might want to use a font color for the comma:

nav.primary li:after{
    content: ",";
    color: #f0f;
}

[sdg]

Oh, great! Thanks so much – my CSS skills are more modest than this. Super.

[sdg]

So I used these commas, but they disappeared now that I updated to the most recent versions of WP/LayTheme. The CSS is still there, so I don’t understand what could be wrong. Do you have any idea? (Website in progress: www.pilvitakala.com/new/)

[mariusjopen]

Hi Sdg!

you need to change the code to

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

Then it should work fine.

Let me know if it did the job!

All the best!

Marius

[sdg]

Thanks a lot, Marius.

‘a:after’ with !important works, but ‘a:last-child:after’ (to prevent a comma after the last menu item) does not work. When I add the !important to the last-child, it removes all commas in the menu. Without !important in the last-child, it keeps the comma after the last menu item. Do you have an idea?

[mariusjopen]

Hey Sdg!

with all the :last, :after, :nth-child() it can get rather complicated and confusing.
I tried to solve it and used all different kinds of solutions. But they all seems to cancel themselves out.

If I were in your situation I would try to solved it with a simple jQuery solution.
With append you can insert pieces of text into div boxes – or you look for the last box in the navigation and hide the , it.

It is a bit tricky but also a very specific detail.

Here is a link to the LayTheme documentations to show you how to implement Javascript:
http://laytheme.com/documentation.html#custom-javascript

Let me know if you have more questions!

Good luck!

Marius

[sdg]

Thanks for your effort! Pity that the update seems to complicate what used to be a simple trick. I’ll try jQuery, hopefully I can get it to work.

(Funny to run into you – Sam speaking here!)

[mariusjopen]

Hey Sam!

Yes! How great!
Here we are!

Wow!

Yes, sorry about the complications. With jQuery it will be possible of course :-)

Much love!

Marius

[sdg]

I tried adding this to the head:

<script>
jQuery("nav.primary li").not(":last").append(",");
</script>

and nothing happens. I tried variations but I can’t get anything to happen, so I wonder if I’m missing something obvious. I’d be very grateful for a nudge in the right direction.

[mariusjopen]

Hey Sam!

Did you have a look into the documentation?

http://laytheme.com/documentation.html#custom-javascript

Because your Lay Theme website is a "Single Page" JavaScript application you cannot just use jQuery(document).ready(…) to execute your js because the ready event only fires once when the website loads the first time.

window.laytheme.on("newpage", function(layoutObj, type, obj){
});

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
});

I hope that helped!

Have a good Thursday Sam!

Marius

[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;
}