Problems with Header Image and Tablet and Phone

Hi Edward,
I checked on my device ans it looks fine. The problem is with header and menu blocking the header image. Is this what you mean?

Hi Edward,
For that try following code in Appearance=> Customize=> Theme Options=> Custom CSS box:

.site-header {
    background-color: transparent;
}

Let me know how this works out.

Regards,
Pratik

Hi @Edward,
I tried that on the site and header kicks in when user scrolls just like in the desktop version? Isn’t this what you wanted?
Further, you are missing a final } in your custom CSS. It should be:

@media screen and (max-width: 991px) {
    body {
        font-size: 12px;
    }
}

rather that

@media screen and (max-width: 991px) {
    body {
        font-size: 12px;
    }

Maybe this is hampering your custom css.

About second question, you can do following:
1. Goto Appearance=> Customize=> Color Options
2. Change colors for menu, header, etc to different ones that you want
3. Then, add following custom CSS code so that it stays white when scrolled:

.float-header .site-title a {
    color: #ffffff;
}

.float-header .site-description {
    color: #eeeeee;
}

.float-header #mainnav ul li a {
	color: #fff;
}
.float-header #mainnav ul li a:hover,
.float-header #mainnav ul li a:focus {
	color: #e8554e;
}
.float-header #mainnav .current_page_item > a,
.float-header #mainnav .current_page_ancestor > a,
.float-header #mainnav .current-menu-item > a,
.float-header #mainnav .current-menu-ancestor > a {
	color: #e8554e;
}

.float-header #mainnav .sub-menu li a,
.float-header #mainnav .children li a {
	color: #fff;
}
.float-header #mainnav .sub-menu li:hover > a,
.float-header #mainnav .children li:hover > a {
	color: #fff;
}

Let me know once you have done so, then we can fix if I missed something.

Regards,
Pratik

Hi Edward,
I will try to answer your questions in order.

2. As to changing the colors for the header text, thanks much for the CSS. However, it doesn’t make everything behave as I would want. If I change the text to be darker, because the homepage has a light photo, and I use your custom CSS, only the text on the homepage returns to white. Please keep in mind that I ONLY have a photo on the homepage. The text on the other pages, which always shows the black header, does not change back to white; it remains the colors I have set. Here are the possible solutions as I see it: 
a) use only darker photos, and keep the text white everywhere; 
b) find a way to prevent the header from going transparent, as long as no part of the photo is hidden; or 
c) find a way to insure that the header text on ALL pages can return to white with custom CSS.

I can provide you with solution for (b). Use following code:

.home .site-header.fixed {
    background-color: #000;
    position: relative;
}
.home .site-header.float-header {
    position: fixed;
}

The problem with this is the transition when the header becomes floated. To solve this, you will need to hire a customizer as there will be a lot of changes in HTML and CSS required.

This solution should solve your (3) point as well as now image will not be hidden at all.

Let me know what you think. No worries about the comments. They were not confusing. In fact, they were even more helpful.

Let me know if I misinterpreted or missed anything.

Regards,
Pratik

Hi @mynameischetan,

Only Simple Catch Free is not responsive in our theme directory. If you want to make the site responsive, you can either upgrade to pro version, or use any other free theme from our Themes directory.

Regards,
Pratik

Hi @mynameischetan,

All your menus, categories, ads, plugins will work the same way.

For future support, all theme related support that can be solved via custom css and minor child theme modification will be provided via this free support forum.

For discounts, please contact sales department at https://catchthemes.com/contact-us/

Regards,
Pratik