Image Overlay on Section Does Not Display

aroundi

I have a fresh install of J4.2.9 with T4 plugin 2.2.6 T4 Blank bs5 1.1.7

My gradient jpg shows in the preview window in the configuration modal but not on the preview or the site. What have I missed?

Help is appreciated, thanks

saguaros

aroundi Hi

Could you share the login credentials of your site? and tell me the section that you're using that image so I can check directly for you.

aroundi

This message is visible to Moderators only

hidden content

aroundi

saguaros

I checked the site and the overlay is working nicely now. Thank you for your support.

Can you tell me what the problem was? Did I overlook something I shouldn't have? I'd like to know so I know how to handle this in the future.

Thanks

saguaros

aroundi Hi

I've not touch it yet, maybe cache from your browser?

aroundi

Hi saguaros

Before posting I tried clearing my browser (Chrome) as well as using Opera with its VPN turned on testing the front end and got the same results. After I sent you I stayed logged out to not be in your way. I'd estimate the setting took several hrs to show, baffling.

I'm now trying to figure out how to shrink the height of the header by 20px.

Thanks for your help.

saguaros

aroundi Hi

Could you illustrate the modification you expect via screenshot so I can help?

aroundi

Hi saguaros

The header overlay on my site is not displaying properly. After configuring the overlay the header increases in height by 20px but the image does not show. This happened, as described in my 1st post a week ago, then the following day, after I stopped trying to fix it, the overlay appeared. The 2 other overlays in rows on the home page also did not load properly.

I reinstalled both Joomla 4 and T4 2 days ago and the same problems occurred. The header image has not shown but it has turned grey (just color fill, not an image).

fyi,
logo loads no problem.
My site uses 2 T4 templates (Home page and Main).

Can you help me fix the image showing and the header height staying at 90px? I don't think this is a normal configuration issue; I've tried everything I could think of.

Thanks for your help.

Manit

Hi aroundi
I tried to access the admin but the 1st login account does not work. Can you please double-check again?

Regards.

aroundi

This message is visible to Moderators only

hidden content

aroundi

This message is visible to Moderators only

hidden content

aroundi

Hi,
I'm making progress. The banner overlay is up. I am still working to get the best height to 90px or less.
The overlay came up after changing from contain to cover. Although I'm certain I tried every combination before I'm not sure I had cleared browser dates between each change.

saguaros

As I can see the header overlay is showing now, did you get it solved?

aroundi

Hi saguaros

Yes, I solved the problems. It was a configuration issue, along with clearing browser cache. I was able to modify the header height as well with custom CSS.

Testing has revealed though that Sticky Top works on desktop and tablet it does not work on mobile. As far as I can tell there is only 1 setting for sticky, which is selected. Can you tell me how to fix mobile header not sticking.

Thanks

Manit

Hi aroundi,

Please add the custom css to your custom.css file to make the header sticky on mobile layout:

@media (max-width: 575.98px)
#t4-header {
    position: sticky !important;
    top: 0 !important;
  }
}

I hope it is helpful.

Best regards.

aroundi

Hi Manit

I added the custom CSS, but no change. Any ideas on what else I could try?

Thanks

Manit

hi aroundi

I see menu on mobile is now sticky. It would be your browser cache, please clear your browser cache.

Best regards.

aroundi

Hi Manit

Thank you. I never knew I could clear the browser cache on my phone; I could even select by URL. That worked. I will remove the custom CSS and test today or tomorrow. I'll come back and let you know if the fix was actually needed.

Thanks again for your support.

aroundi

Hello,

I removed the custom CSS

#t4-header {
position: sticky !important;
top: 0 !important;
}

and the mobile header was no long sticky. So, this was the fix. I placed it under a media query that I already had in custom CSS. I should point out that the above is missing a curly bracket at the end of the first line for anybody who my copy it.

Thank you

saguaros

aroundi Is that all ok now? Let me know if you need any other helps 🙂