Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1066221

Hi

You can add header.php file in the /local/tpls/header.php
To create an override of this file.
For the back to top button

Open tpls/blocks/footer.php file
Add below code after line 15

<!-- BACK TOP TOP BUTTON -->
<div id="back-to-top" data-spy="affix" data-offset-top="300" class="back-to-top hidden-xs hidden-sm affix-top">
  <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-up"></i></button>
</div>

<script type="text/javascript">
(function($) {
  // Back to top
  $('#back-to-top').on('click', function(){
    $("html, body").animate({scrollTop: 0}, 500);
    return false;
  });
})(jQuery);
< /script >
<!-- BACK TO TOP BUTTON -->

save and check.

For sticky menu do you want it only for mobile ?

Regards

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#1066236

Hi,
Thanks #3 resolved – override.

Now, on to the remaining two:
I added code for "back to top", didn’t work.

The sticky came default for large screens, I also want it for all other screens

Regards.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1066245

Hi
Can u share the URL here?

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#1066246

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1066248

Hi
Add below code in custom.css file

.header-trans .t3-header-wrap.affix {
    position: fixed!important;}
    .back-to-top {
    position: fixed;
    bottom: 70px;
    right: 24px;
    z-index: 100;
}.back-to-top.affix .btn {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}.back-to-top .btn {
    background-color: #234269;
    color: #ffffff;
    padding: 0;
    height: 60px;
    width: 60px;
    -webkit-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

Regards

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#1066405

Thank you.

One more thing how to get the back to top on all screen views? Currently it only shows on large screens.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1066638

Hi
Remove
hidden-xs hidden-sm from the footer.php code i suggested in this thread.
Regards

[cytropics Friend cytropicsJoin date: April 2014Posts: 44Downloads:38Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#1066657

Thank you.

[Author]

Posts