Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Solved: Pin banner module to bottom of browser?

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

With the Venture template, Is it possible to have the module assigned to the banner position 'pinned' (or be 'sticky') to the bottom of the user's browser window? If so, can you please give me some guidance on how to do that?

Here's my WIP site:
nearmiddlefar.com

Thanks in advance for your help!

Update: I created another thread, but now I wonder if there is one solution that will resolve the questions/requests in both this thread and the other one. Here is that other thread:
www.joomlabamboo.com/index.php?option=com_kunena&view=topic&catid=681&id=115550&Itemid=215
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 5 years 10 months ago by porwig.
The administrator has disabled public write access.
hmm not sure - it would look a bit odd as the pic would distort

With it being just images and a little text - the search engines may struggle to index the site

So the ranking would be low

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig
Thanks Paul - perhaps I don't understand very well how Venture handles the relationship between the banner module and the background slideshow.

Does the position of the banner module always have to align with the bottom of the slideshow background images - is the slideshow also internally assigned to the banner module position? Is that why you said the slideshow image might become distorted - because if the banner module was always 'pinned' to the bottom, then it would also 'pin' the bottom of the slideshow images?

I guess my thought/hope is the banner module could be pinned to the bottom independent of the slideshow images below it, just like the sticky nav is pinned to the top independent of the layers below it. Or is there something else from a technical standpoint that I am missing?

You make a good point about the likelihood of poor SEO for the current home page layout. For better or worse I have seen a lot of art/photography/creative websites that have very little content on the home page. And to be honest, I don't think SEO is a major priority for this site anyway.

So if we set aside the SEO concern, does that mean there is also a technical constraint or limitation regarding what I am asking for with this?

Or - maybe an alternative approach to overcome the distortion problem you mentioned could be to publish that module in a different module position (de-couple it from the background slideshow?), and then make that module sticky to the bottom?

Thanks for helping me to understand better how Venture works, and the issues/consequences for what I asked about!
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 5 years 10 months ago by porwig.
The administrator has disabled public write access.
Hi Paul,

This code will place the banner at the bottom of the page:
#bannerwrap {
    position: fixed !important;
    z-index: 20 !important;
    width: 100%;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
}

So if you wanted to get it to do that style at a certain point of the user scrolling you could just add the html fixed class like this:
.fixed #bannerwrap {
    position: fixed !important;
    z-index: 20 !important;
    width: 100%;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
}

Fixed kicks in when the sticky nav is enabled so that might work with what you need.

I also increased the rgba value to 0.8 so that the text would be visible.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
The following user(s) said Thank You: porwig
Thanks Anthony!

I have added that first CSS class you shared on my WIP site and it works. I do notice some unexpected behavior when I re-size the browser (sometimes it needs a refresh to re-set itself), but I think this one should be called 'solved/closed'. I think my request here falls outside the scope of support for a standard/reasonable Venture use case, but you have shown how to implement it and I can continue tweaking it if I want to include this on that site.

Thanks again to you and Paul for your great support!
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Thanks Paul

Good luck with the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers