Responsive menu sizing

@Paul: Oh you have lot of items in menu. For your site, you can add the following css in “Appearance => Theme Options => Custom CSS” box:

@media screen and (max-width: 1280px) {
    #access-top ul.menu a { padding: 12px; }
}
@media screen and (max-width: 1152px) {
    #access-top ul.menu a { font-size: 12px; }
}
@media screen and (max-width: 1100px) {
    #access-top ul.menu a { padding: 12px 9px; }
}
@media screen and (max-width: 1000px) {	
    #access-top { display: none; }
    .mobile-menu {
        display: inline-block;
        float: left;
        height: 46px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 46px;
    }
    .mobile-menu a { padding: 12px; }
}

@Paul: Yes, it will be great if you can rate it at https://wordpress.org/support/view/theme-reviews/catch-flames?rate=5#postform

@Paul: Thanks a lot. You Rock 🙂

@kip: For catch box pro theme, you need to user the forum https://catchthemes.com/support-forum/forum/catch-box-pro-premium/

For that, you can reduce the width in the following css as per your need and then add it in your child them stye.css file
.sidr { width: 260px; }

Sorry Sakin – Kip again.
Tried this with 150px and nothing changed.

When it didn’t work, I went back to the previous child style.css.
I’l putit back in. Sorry about that.

Thank you Sakin – you are brilliant!
Works excellently.
Kip

@kip: Add the following css:
#branding #mobile-header-left-nav ul.menu a { line-height: 1.2; }