How can I change the font size of my menu header on Prestige theme?

[pongopetfood]

Hello, 

I'm using Prestige theme and I would like to change the font size of my menu on my header for desktop and mobile, it looks to small now. 

URL : https://pongopetfood.com/

Password : Pongopetfood!

Thankss

[petramarkovic · Accepted solution]

Hi!

You can modify this if you go to your assets folder, and find base.css file and input the following at the bottom of the file:

.header__primary-nav-item a {

font-size: 20px;

}

Change the number to your liking, and for the mobile depending on the breakpoint you can input:

@media screen and (max-width: 768px) {

.header__primary-nav-item a {

font-size: 15px;

}

}

[pongopetfood]

Thanks a lot, it's working !

[petramarkovic]

You're welcome 😀

[pongopetfood]

Oh it's not working for mobile... DO you have a solution for ? 

[Anshul_arora]

Hello @pongopetfood ,

I understand you are looking to increase the font size of the navigation menu for both desktop & mobile version.

Please add the below mentioned code in your theme.liquid file for the desired output.

Steps -:

1. Go to Online store -> Themes -> Click on Three dots(Action) -> Edit code

2. Now, Search for the theme.liquid file and open it.

3. Next, add the below mentioned code at the bottom of the file before </body> tag.

<style>

a.block.h6 {
font-size: 20px;
}

summary.h6 {
font-size: 20px;
}

/* Use this code for mobile menu */

a.header-sidebar__linklist-button.h6 {
font-size: 20px;
}

button.header-sidebar__linklist-button.h6 {
font-size: 20px;
}

</style>

[Please feel free to change the font-size as per your requirement.]

4. Save changes.

Output -> https://prnt.sc/1PCu7YYhROLh  , https://prnt.sc/8iYgscQUxNql

I hope the code helps you.

Please let me know if you have any query.

Thank you.