Mobile menu align left, and commas between desktop menu points
-
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
-
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; }
-
Awesome thanks so much!
-
Just a note: In point 1 I think there is a stray '.' before 'nav.primary' that's not needed.
M
-
This post is deleted! -
@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 http://efeubijoux.ch/home -> its still very rough, I just startet. but I wanted to have a "/" between ANGEBOT and KOLLEKTION and so on ...
-
Dear @tizi
you can sue CUSTOM CSS and have a look here:
https://stackoverflow.com/questions/27836769/comma-separated-spans-with-pure-cssBest!
Marius -
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 -
Dear @mike
super good!!! :-D
Thank you for sharing!Marius
I don't answer or check forum DMs, please just post on the forum.
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it