How can I adjust the menu font size for tablet viewing?

Store Design
, ,
1

Hi there,

how do I adjust the font size of the menu when I view the page in tablet mode?

Best,

Isa

2

Hello @isabellemaria

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media only screen and (min-width: 768px){
.header--mobile-center .menu-drawer__menu-item {
    font-size: 30px !important;
}
}
3

Hi @isabellemaria

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

We’ve checked your website and found that the “font-size” attribute of the “.header__menu-item” class has an “important” option, which has the highest priority even though you change the font-size in anywhere (as shown below).

view (41).png
view (41).png1892×847 450 KB

So you need to determine where that attribute is located in your theme code files and remove this attribute.

Then find the file base.css and add this code at the end of the file.

.header__menu-item {
    font-size: 24px;
}

Note: You can customize the font size to your liking.

Hope this can help you.

Kind regards,

4

Thanks to those who answer this question. I have adjust font size of the menu by following there guidance. Thank you so much