How can I change the font and letter case in my Narrative theme menu?

[Sadea]

Hello,

My url is: minisanitizersprayer.myshopify.com

The theme: Narrative.

I need help in changing the font of my menu.

I would prefer if it was “Sans-serif”, which i am also using for my body text.

Additionally, as shown in the attached image, some parts of the menu are uppercased, which i would like to change, so that it is only the first letter that is in uppercase instead of the entire word.

Thank you in advance!

[dmwwebartisan]

@Sadea

Please add the following code at the bottom of your css file.

.navigation__expand-sublinks, .navigation__link a{
text-transform: none !important;
font-family: sans-serif !important;
}

[Sadea]

@dmwwebartisan

Perfect, this worked!

How do i remove this spacing between the letters?

[oscprofessional]

@Sadea ,

ul.navigation__links span {
    text-transform: none;
font-family: sans-serif !important;
}
li.navigation__link.navigation__entrance-animation.navigation__entrance-animation--active a {
    text-transform: none;
font-family: sans-serif !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Sadea]

@oscprofessional

I fixed it, but how do i remove the spacing?

[oscprofessional]

@Sadea ,

Sure.

now copy my code…

[oscprofessional]

@Sadea ,

ul.navigation__links {
    margin: 0;
}

use this.

[Sadea]

@oscprofessional

Perfect,

And now, how do I increase the text size of the highlighted section?

[oscprofessional]

@Sadea

ul.navigation__links span {
    font-size: 29px;
}
li.navigation__link.navigation__entrance-animation.navigation__entrance-animation--active a {
    font-size: 29px;
}

[oscprofessional]

@Sadea ,

li.navigation__link.navigation__entrance-animation.navigation__entrance-animation--active {
    max-height: 41px;

}

[Sadea]

@oscprofessional

This changes both sections of the menu.

I would like to only edit the bold section shown here:

[oscprofessional]

@Sadea

remove this css

[Sadea]

@oscprofessional

Thank you!

[oscprofessional]

@Sadea

ul.navigation__links:nth-child(1) a {
    font-size: 29px;
}

add this please

[Sadea]

@oscprofessional

Great, but now the drop down menu is too large.

How do i make this smaller?

[oscprofessional]

@Sadea

.navigation__sublink a {
font-size: 1.6rem !important;
}

[Sadea]

@oscprofessional

Great!

Final thing, this is still too large.

[oscprofessional]

@Sadea

send screenshot of English language

[Sadea]

@oscprofessional

[oscprofessional]

@Sadea

remove this css