How can I change the font style and size of my website's navigation menu?

[aeilene]

I've been trying for hours to change the font for my navigation/menu and tried all the solutions here. I would like to change the font to Oswald. It would also be awesome to help with sizing as well. Please help! My website is thetemplatevault.com and the password is rohblo.

Thank you!

[Moeed · Accepted solution]

Hey @aeilene 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__inline-menu ul.list-menu li a.header__menu-item {
    font-family: 'Oswald' !important;
    font-size: 25px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed · Accepted solution]

Hey @aeilene 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item span {
    color: blue;
}
</style>

RESULT:

NOTE: Change the color from Blue to any color you want

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed]

Hey @aeilene 

Your website is password protected, can you please share the Password as well?

Best Regards,
Moeed

[Hardik29418]

Please go to Online store -> themes -> Edit theme -> Layout -> theme.liquid and paste this code before </head>

<style>
.header__inline-menu ul.list-menu li a.header__menu-item {
font-family: 'Oswald' !important;
}
</style>

[Moeed · Accepted solution]

Hey @aeilene 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__inline-menu ul.list-menu li a.header__menu-item {
    font-family: 'Oswald' !important;
    font-size: 25px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aeilene]

It worked! Can you also help me with changing the font color and hover as well?  Please and thank you!

[Moeed · Accepted solution]

Hey @aeilene 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item span {
    color: blue;
}
</style>

RESULT:

NOTE: Change the color from Blue to any color you want

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aeilene]

You're so awesome! Thank you!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[aeilene]

Would you be able to help me with changing other navigation bar background color?  Thanks so much!

[Moeed]

Hey @aeilene 

Can you please tell me which other navigation bar are you talking about where you want to change the background color?

[aeilene]

Only the navigation bar part, black background, and white font. Thank you @Moeed !

[Moeed]

Hey @aeilene 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
nav.header__inline-menu {
    width: 100%;
    text-align: -webkit-center;
    background: black;
}
.header__inline-menu ul.list-menu li a.header__menu-item span {
    color: white !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aeilene]

could it be paralleled with the announcement bar? Thanks so much.

[Moeed · Accepted solution]

Hey @aeilene 

Just set the width to 138% then it should be parallel with the announcement bar.

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aeilene]

You are so awesome, @Moeed ! thank you!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[aeilene]

Thanks!!

[Fredautoparts]

Hi Moeed,

I'm having an issue. The font for Collections with the submenus isn't being changed. The submenus it's self are changed though.

[Moeed]

Hey @Fredautoparts 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Fredautoparts]

Here you go, www.fredautoparts.com

Also a question why does my contact page not have a underline when on it but other pages do? This isn't related to the font, I've been having this problem.

[Moeed]

Hey @Fredautoparts 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
summary#HeaderMenu-collections {
    color: black !important;
    font-family: 'Alexandria' !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it.

Best Regards,
Moeed

[Fredautoparts]

Wow, you're very fast at what you do. Thank you so much!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.