Increasing font size of submenu and maybe menu items for mobile phones and ipads

I tried increasing the sub menu items for the hamburger menu on tablets and mobile phones and that didnt work. I tried this and didnt work for some reason:

@media (max-width: 979px) {
.x-navbar .x-nav .sub-menu {
font-size: 14px;
}
}’

I will give a link to my site in a secure link. Im using icon, theme x.

Hello @Bark201,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
   .x-navbar .mobile .x-nav ul li a {
    font-size: 1.2rem !important;
}
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thank you for the reply and links but I have to say that I dont see any changes. Can you please take a look again? I dont know if this is cache related but I did disable the CDN and I dont see the changes.

Ok, I think I am seeing something but there is a small bit missing. The nav menu may be bigger but not the submenu. That means if there is an item called ‘vacations’ with a dropdown menu then the items under ‘vacation’ are still small. Do I need to add sub-menu to the code? If yes, can you please write it here? I will look more into CSS once this is don.

UPDATE Ok. so it was a caching issue I think but it did change the fonts for sub-menu items. Can you please also add the code to change the font size of the menu items so it will match the sub-menu items?

Hi There,

Please update the previous CSS to this:

.x-navbar .mobile .x-nav li>a {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}

Let us know how it goes!

Thank you but there is something I wish to add in a secure note

We’re sorry, @Bark201. I’ll tell my colleagues about this.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.