1. b8fish
  2. Commercial Templates
  3. Saturday, 15 July 2023
  4.  Subscribe via email
My image in a module in position Showcase-1a is rendered overlapping the header container.

This is also true for modules in the Top-1 position if there is no Showcase-1 module

Attached are screenshots showing the area as displayed and the area as identified by Chrome inspect

This also overlaps if sticky header is on or off

Suggestions?

See j4.bigwoodsgoods.com
--
Paul
Attachments (2)
References
  1. https://j4.bigwoodsgoods.com/
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Paul

Does disabling the General Settings -> Overlap Header if in showcase-1# module position option in your slideshow module settings give you the desired result?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
It was actually a Custom HTML module, not a SlideShow module. I did try creating a slideshow module and disabling the overlap option which did indeed drop the image below the header but still overlapped the social media icon bar. I added some empty lines into the "HTML before" field which dropped it down below the social media line. However, as a slideshow module, the pic is auto-zoomed indefinitely as it is a single image - which is not an effect I want to see on that module.

So, I went back to Custom html module and added a margin-top:5em to the image.

That is at least giving me the correct visuals for this showcase module -- j4.bigwoodsgoods.com

Other pages do not have the showcase position and do have a slideshow module with multiple slides and so the auto-zoom effect is appropriate.

However, is there a way to manage the image animation? All I see is title and caption animation controls.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello,

about the zoom-in animation effect in the layerslideshow module: I used the Nina template on this page too: https://weberhof-aschbach.de/
We disabled the animation effect by adding the following to our custom.css:

div.layerslideshow .tns-slider img {
transform: none !important;
}


Hope this helps.
Oliver
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok