Mobile menu align left, and commas between desktop menu points

[mike]

Hi Armin

Hope you can help. I would like to align the mobile / tablet menu text left rather than the default centred. I see in the 'customiser' there is a way to align the site title left but not the menu. I have tried to work this out with custom css but not managed it. Could you point me in the right direction?

Also I have commas in between my menu items. You posted a way to do this on the forum without need to include this in the menu text itself. I have searched and searched but can't find this original post. Could you remind me?

Once again thanks for your help and all the efforts with Lay theme.

Best

Mike

[arminunruh]

nav.primary li a{
text-align: left;
}

That will align the text to the left :). Put it in "lay options" -> "custom css & html" -> "custom css for mobile version".

You can have commas between menu points with this css (in "Custom CSS for Desktop Version"):

li:after{
    content: ',';
    display: inline;
}

li:last-child:after{
    display: none;
}

[mike]

Awesome thanks so much!

[mike]

Just a note: In point 1 I think there is a stray '.' before 'nav.primary' that's not needed.

M

[mike]

This post is deleted!

[tizi]

@arminunruh is it possible that point 2 doesn't work anymore if I use multiple menus? i also tried the same code but with "nav.second_menu" in front of "li" but it somehow doesnt seem to work ...

[mariusjopen]

Dear @tizi
can you post a link to your website?

Best!

Marius

[tizi]

@mariusjopen http://efeubijoux.ch/home -> its still very rough, I just startet. but I wanted to have a "/" between ANGEBOT and KOLLEKTION and so on ...

[mariusjopen]

Dear @tizi
you can sue CUSTOM CSS and have a look here:
https://stackoverflow.com/questions/27836769/comma-separated-spans-with-pure-css

Best!
Marius

[tizi]

thanks for your answer! I worked it out now.
I found the hint i was looking for within another entry (http://laythemeforum.com:4567/topic/671/separate-menu-items-by-commas-instead-of-spacing/13) and solved it with:

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

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

nav.third_menu a:after {
content: " /" !important;
}

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

nav.fourth_menu a:after {
content: " /" !important;
}

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

thanks!
tizi

[mariusjopen]

Dear @mike
super good!!! :-D
Thank you for sharing!

Marius