How can I increase the letter spacing in my navigation menu?

[INFRA]

Hi there,

I would like the navigation menu to have the same font as the filter buttons (PT sans, character spacing 2 I think). How can I achieve that?  I can only change the font separately for the (sub)headers and body text in the editor I think!

website

Thanks!

[saurav9005 · Accepted solution]

In header page insert this code

<style>
.js .site-nav.mega-menu li a {
    letter-spacing: 7px;
}
</style>

[saurav9005 · Accepted solution]

In header page insert this code

<style>
.js .site-nav.mega-menu li a {
    letter-spacing: 7px;
}
</style>

[INFRA]

Hi! 

Which file should I add it to?

I tried adding it in the editor but nothing happened 

[saurav9005]

open header.liquid and above code at the top.

[INFRA]

Thanks! And is it possible to apply PT Sans font to this too?

[saurav9005 · Accepted solution]

Yes, May be you can. try this

.js .gm-menu-installed .gm-item.gm-level-0 > .gm-target > .gm-text {
font-family: 'PT Sans' !important;
}

[INFRA]

thanks so much, that both worked perfectly! is there a way to only apply the letter spacing to the 4 menu items at the top? (not the dropdown submenus)

[saurav9005]

okay try this

<style>
.js .site-nav.mega-menu li.gm-level-0 a {
    letter-spacing: 7px;
}
</style>

[INFRA]

Thank you @saurav9005  Is it possible to make those 4 menu items in bold too?

I tried adding below line but it didn't do anything:

 font-style: bold;
 

---

@saurav9005 wrote:

okay try this

<style>
.js .site-nav.mega-menu li.gm-level-0 a {
    letter-spacing: 7px;
}
</style>

---

[saurav9005]

It is font-weight not font-style. please see the code

<style>
.js .site-nav.mega-menu li.gm-level-0 a {
    letter-spacing: 7px;
    font-weight:bold !important;
}
</style>