Solved

Font size menu header

pongopetfood
Excursionist
27 0 9

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

Accepted Solution (1)

petramarkovic
Shopify Partner
5 1 1

This is an 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;

}

}

View solution in original post

Replies 5 (5)

petramarkovic
Shopify Partner
5 1 1

This is an 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
Excursionist
27 0 9

Thanks a lot, it's working !

petramarkovic
Shopify Partner
5 1 1

You're welcome 😀

pongopetfood
Excursionist
27 0 9

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

Anshul_arora
Trailblazer
233 48 30

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here