Monitor Reply

Support

Sitewide Header navigation

Permalink Browser Info Environment February 15, 2016 at 6:39 PM

Hello,

I was wondering if you had any plans in the future to allow the sitewide header navigation bar to be "sticky" (always on top) when scrolling down the pages.

Really nice theme, thanks!

Type:	Pre-Sale
Status:	In Progress

jordif replied on Feb 16, 2016 at 9:53 am Permalink Reply

Hello,

thanks for the nice words! I'll consider adding this is as an option in future updates.

In the meantime, you could achieve this using the affix plugin included in Bootstrap (the theme is based on bootstrap 3).

If you want to give it a try, you only need to add an HTML block to one of the Sitewide Areas (for instance one of the footer areas) with the following code in it:

<script>
$( document ).ready(function() {
    var offset = $('.navigation').offset();
    $('.navigation').affix({
          offset: {
            top: offset.top
          }
    });
});
</script>
<style>
.navigation.affix {
    top: 0;
    left: 0;
    right: 0;

Viewing 15 lines of 22 lines. View entire code block.

 
<script>
$( document ).ready(function() {
    var offset = $('.navigation').offset();
    $('.navigation').affix({
          offset: {
            top: offset.top
          }
    });
});
</script>
<style>
.navigation.affix {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
}
.ccm-toolbar-visible .navigation.affix {
    top: 48px;
}
</style>

You could also add a "slide in" animation if you use this code (instead of the previous one):

<script>
$( document ).ready(function() {
    var offset = $('.navigation').offset();
    $('.navigation').affix({
          offset: {
            top: offset.top + 30
          }
    });
});
</script>
<style>
.navigation.affix {
    top: 0;
    left: 0;
    right: 0;

Viewing 15 lines of 38 lines. View entire code block.

 
<script>
$( document ).ready(function() {
    var offset = $('.navigation').offset();
    $('.navigation').affix({
          offset: {
            top: offset.top + 30
          }
    });
});
</script>
<style>
.navigation.affix {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}
.ccm-toolbar-visible .navigation.affix {
    top: 48px;
}
@-webkit-keyframes slideIn {
  0% {-webkit-transform: translate3d(0, -100%, 0);}
  100% {-webkit-transform: translate3d(0, 0, 0);}
}
 
@keyframes slideIn {
  0% {transform: translate3d(0, -100%, 0);}
  100% {transform: translate3d(0, 0, 0);}
}
.navigation.affix {
  -webkit-animation-name: slideIn;
          animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
</style>

Thanks for the feedback!

Jordi

dajehle replied on Feb 16, 2016 at 10:15 am Permalink Reply

Hey - thanks for all the info! Much appreciated, I think I'll have a go at that.

Again, lovely theme. Its nice to see a fully fledged "non-corporate" one out there for a change. :)

Thanks
Dawn

Long Way Home

Support

Sitewide Header navigation

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post