change font size for two menu points in mobile-menu

[florine]

Hi!

I would like to appear 2 menupoints smaller in the mobile menu than the rest and change their color and font style.
I tried to do this in the 'css for Mobile Version' section of lay theme-options with the following code:

nav.laynav {
font-family: "ABCDiatype-Regular";
font-size: 17px; !important;
}

.menu-item-6969 {
    font-family: "ABCDiatype-RegularItalic";
font-size: 12px; !important;
color: white;
}

.menu-item-6968 {
    font-family: "ABCDiatype-RegularItalic";
font-size: 12px; !important;
color: white;
}

This did work out for the font style, but not for the size and the color.
Can you tell me why / what I have to do?

I also did put up settings in 'Costumize' > 'Mobile Menu', where I defined the font size for the menupoints on 17px. Maybe this is where the problem parts from?

this is the website I am working on:
https://tanzhausbern.ch/on-stage/

Thanks for your help
Florine

[arminunruh]

there is an error in your css:

it needs to be:
font-size: 12px!important;

[florine]

Dear Armin
Oh, sorry!

I changed that and it still doesn't work for the font size though
my css now is:

nav.laynav {
font-family: "ABCDiatype-Regular";
font-size: 17px;
}

.menu-item-6969 {
    font-family: "ABCDiatype-RegularItalic";
font-size: 12px!important;
}

.menu-item-6968 {
    font-family: "ABCDiatype-RegularItalic";
    font-size: 12px!important;
}

it's really strange that it accepts the font-family but not the size.
Hope there is not another error in the code...
Thanks for helping!

[arminunruh]

your css targets:
.menu-item-6969 {}

but my css as you can see in the screenshot above targets:
nav.mobile-nav li a

my css has precedence because the selector is more specific.
read about it here:
https://jenkov.com/tutorials/css/precedence.html

this should work:

nav.mobile-nav li.menu-item-6969 a {
    font-family: "ABCDiatype-RegularItalic";
    font-size: 12px!important;
}

nav.mobile-nav li.menu-item-6968 a {
    font-family: "ABCDiatype-RegularItalic";
    font-size: 12px!important;
}

[arminunruh]

also, you can add css classes to menu points and use them instead of targeting the menu points individually in appearance -> menus:

[florine]

Dear Armin

Great, now it works! Thank you so much!