• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to create a a sticky navigation menu 2014-03-18

No permission to download

vexx

Active member
#1
vexx submitted a new resource:

How to create a a sticky navigation menu - Provide a sticky floating menu to your users when they scroll the forums

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:

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()...
Read more about this resource...
 
#15
To get it working with a fixed style and to include the search bar, i have modified my header template rather than navigation template:

Code:
<xen:edithint template="header.css" />
<xen:hook name="header">
<div id="header">
    <xen:include template="logo_block" />
        <div class="floatnavigation">
        <xen:include template="navigation" />
        <xen:include template="floating_bar" />
        <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
    </div>
</div>
</xen:hook>
In floating_bar template, I have changed #navigation to .floatnavigation
Finally, here is my .floaty css:
.floaty {
position: fixed !important;
width: 100%;
z-index:100;
top:0;
}
 

BassMan

Well-known member
#16
Looks promising. I'll test that tomorrow.

I was already thinking of search box. What about logo and moderator panel to be always on top? So the whole header to be fixed.
 

woei

Well-known member
#17

FredC

Well-known member
#18
Did anyone ever figure out a fix for IE users? seems to ignore Margins and such and floats left when browsing with IE..
 

BassMan

Well-known member
#19
To get it working with a fixed style and to include the search bar, i have modified my header template rather than navigation template:

Code:
<xen:edithint template="header.css" />
<xen:hook name="header">
<div id="header">
    <xen:include template="logo_block" />
        <div class="floatnavigation">
        <xen:include template="navigation" />
        <xen:include template="floating_bar" />
        <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
    </div>
</div>
</xen:hook>
In floating_bar template, I have changed #navigation to .floatnavigation
Finally, here is my .floaty css:
.floaty {
position: fixed !important;
width: 100%;
z-index:100;
top:0;
}
Brilliant! Finally I've tested it and it works. Well, I combine it with my add-on: http://xenforo.com/community/resources/quicksearch-in-header.2683/

... and it looks and functions excellent!
 

Triops

Active member
#20
I would like to fix the complete header including logo & searchbar. This somehow works by using id #header and don't care about scrolling height in template floating_bar:

Code:
<script>
   jQuery(document).ready(function ($){
       $(window).bind('scroll', function() {
       var navHeight = ( $(window).scrollTop() );
       $('#header').addClass('floaty');
        });
    });
</script>
But something more is needed.
This fixes the complete header perfectly, but it overlays the first part of any page, immediatly when scrolling. So the first part of the content "jumps" under the header and is not visible anymore.
What I would like to achieve is to fix completly the header, and when a user starts to scroll, the content part will be scrolled under that header, without any jumping. When a page is scrolled top, it looks like if the were no floating header, but scrolling the content, even at the first pixels down, the content, which is below the header, will be smoothly (no jumping) scrolled under the header.

Sorry for this bad description, but maybe one knows what I mean and can help?