[Edward]

Please look at http://www.zohnlaw.com on computer, tablet and phone. I think that the header image only behaves properly on the computer. I created a 1920×600 image as suggested, but it still doesn’t work. Doesn’t show up on phone at all, and is cut off improperly on the tablet.
Thanks much.

[Pratik]

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?

[Edward]

Pratik,
Yes, this is what I mean. The header image does not behave on mobile devices as it does on a computer. On a computer, the menu starts out within the header image, then when you scroll down the black header takes over and now you see the menu within the black header. It does not work this way on mobile devices.
Regards,
Ed

[Pratik]

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

[Edward]

Pratik,
That made things worse. When I do that, the black header NEVER shows up on a mobile device.
On the computer, the header starts out transparent. When you scroll a little, the black header kicks in. Right now mobile devices don’t do that.
And while we are at it, is there anyway to change the color of the header text during the time when the header is transparent? The header text is white; if the background photo is light, the header text is not visible when the black header is INvisible.
Again, sorry for these questions.
Thanks,
Ed

[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

[Edward]

1. As to the error in my custom CSS, thanks much. I fixed it, but it didn’t change anything else.
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.
3. As to the different activities of the transparent header on mobile devices, here is what happens on all three types of devices: a) COMPUTER: header starts out as transparent; when I scroll down, photo rolls off the top of the screen and the header turns to black. b) iPad with iOS 10: header does NOT start out transparent-it is always black-and the top half of the photo is hidden; if I drag down the entire photo appears under the black header until I let go; if I drag up (that is, scroll down) the photo then rolls off the top of the screen. c) iPhone 5c with iOS 10: When held vertically, black header hides entire photo. When held horizontally, black header hides most of the photo. Aside from that, the iPhone then behaves like the iPad, that is, if I drag down the entire photo appears under the black header until I let go; if I drag up (scroll down) the photo then rolls off the top of the screen as normal.

Thanks again for your direction, and I hope my comments are not too confusing.

[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

[mynameischetan]

Hello Everyone!!
Hope you all are doing well!

Here i have one question for all. I have one wordpress website with having “Simple Catch” theme, site link is given below. The thing is, this site is not responsive site and i dont have any ideas how to make it. I have to use plugin to make the website responsive website. Is there anyone who can help me to make my website more responsive without using plugin?

http://www.nepaltourandadventures.com

Thanks in advance

[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

[mynameischetan]

Hi Pratik, Thanks for the reply.

If i purchased then what about my running ads, navigation, content, categories, other plugins etc? Are they will be there as it is? And what about future support if i require, will you charge extra money for future support? Is there any discount going on for “Simple Catch Pro” theme?

waiting for your reply

Regards,
Chetan

[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

[Author]

Posts