- Compatible XF 1.x versions
- 1.1
- 1.2
- 1.3
I've searched the forums for a solution in the past couple of days and I haven't found any resource or elegant solution to this simple style tweak.
First of all, you need to add a css class in your extra.css file:
Then you have to create a template, let's name it "floating_bar" and add the following code do it:
Then you have to go to your navigation template and add the following line:
That's it! If you have a custom theme, you have to see the class of the menu there and replace #navigation with #custom or .class (depending on the case).
If you want to see an example, go to my eso forum, login with user: test pass: test and do some scrolling
First of all, you need to add a css class in your extra.css file:
Code:
.floaty {
position: fixed;
min-width:100% !important;
z-index:9999;
}
Then you have to create a template, let's name it "floating_bar" and add the following code do it:
Code:
<script>
jQuery(document).ready(function ($){
$(window).bind('scroll', function() {
var navHeight = ( $(window).scrollTop() );
if (navHeight > 100) {
$('#navigation').addClass('floaty');
}
else {
$('#navigation').removeClass('floaty');
}
});
});
</script>
Then you have to go to your navigation template and add the following line:
Code:
<xen:include template="floating_bar" />
That's it! If you have a custom theme, you have to see the class of the menu there and replace #navigation with #custom or .class (depending on the case).
If you want to see an example, go to my eso forum, login with user: test pass: test and do some scrolling