Reducing the size of submenu text on mobile display - too large for all items to display

Site URL: https://www.votewaltersmith.org

Password: givewalteryourV

For the nav menu item Issues, there are a number of submenu items and they display fine on a PC.  When I view the site on a mobile device, the submenu text is so big that the list gets truncated.  Also, the submenu text doesn't even display when the phone is held horizontally.  Is there a way to reduce the submenu text size for just mobile and have it at least display the full list in vertical mode on a phone?

Thanks!

Add to Home > Design > Custom CSS

.header-menu-nav-folder-content .header-menu-nav-item a {
    font-size: 10px;
}

Thanks, Tuanphan.  Quick question, if I try this and don't like how it works, does this Custom CSS still show in the CSS Editor so that I can remove it?  I couldn't find an article anywhere about removing Custom CSS if you don't like what it does.  With all the "warnings" about using Custom CSS, I didn't want to break my entire template/site by putting in Custom CSS only to find out I didn't like what it did.  Thanks!

5 hours ago, WGSmith said:

Thanks, Tuanphan.  Quick question, if I try this and don't like how it works, does this Custom CSS still show in the CSS Editor so that I can remove it?  I couldn't find an article anywhere about removing Custom CSS if you don't like what it does.  With all the "warnings" about using Custom CSS, I didn't want to break my entire template/site by putting in Custom CSS only to find out I didn't like what it did.  Thanks!

You can remove it anytime 😂

It is always there, if deleted it then the effect it created will be deleted, the website will not be affected by anything.

Thank you!

Hello, so I have similar problem and i've tried using this code but it didn't work. I want the menu on the phone to be with less padding because when someones enter my website through instagram or other app they cant see the button on the bottom unless they scroll down. I have used the button as a the "contact us" page. It is not obvious that they have to scroll down and many customers of mine complain that they can't contact me through the website because they don't see it. There is a plenty of space after the Logo and the social media icons how can i minimize this so that everything fits ok? Thank you

the answer for me if anyone else is looking is design css

Add to Home >D esign > Custom CSS
@media screen and (max-width:767px) {
.header-menu-nav-folder-content {
    flex-grow: 0;
}
}