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

[vexx]

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:

.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:

<script>
   jQuery(document).ready(function ($){
       $(window).bind('scroll', function()...

Read more about this resource...

 

[Allan]

Screen please ?

 

[CNK]

How to stick the menu to the top of the page?

 

[smimosmile]

How to stick the menu to the top of the page?

Add top:0; to .floaty class in EXTRA.css

 

[BassMan]

How to use it with fixed style?

 

[vexx]

it doesn't matter what style you have, position:fixed will be applied to the element of your choice

 

[BassMan]

it doesn't matter what style you have, position:fixed will be applied to the element of your choice

But something is not working right. I'll check just one thing...

 

[thumped]

i think he means fixed width, eg http://thumped.com/bbs/

 

[BassMan]

i think he means fixed width, eg http://thumped.com/bbs/

Ah, yes, fixed width, not style... Thanks, @thumped. I have same issue as on your example page.

 

[BassMan]

Another thing is the drop-down menu not showing right. It's not all visible.

 

[thumped]

Another thing is the drop-down menu not showing right. It's not all visible.

try changing the z-index for floaty to 7500

 

[BassMan]

try changing the z-index to 7500

Great, that's fixed, but how to avoid streching the menu to full screen size if I'm using fixed width like you?

 

[Luis]

For styles fixed, please try using:

.floaty {
    position: fixed;
    top: 0;
    z-index: 1000;
    right: 0;
    left: 0;
}

 

[BassMan]

Excellent. Now it looks like it should. Thank you very much, @Luis.

 

[smimosmile]

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

<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]

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]

There is something similiar that is imho a cleaner solution: http://xenforo.com/community/threads/floating-navigation-bar.19295/

I have this on my site http://scooterforum.net but it's not perfect. On iPhone it doesn't work neatly, so I'm trying to figure it out. But overall I find it more handy to include basic forum navigation with it, because I rarely want to have always access to my usercp, but I always want to press new posts

 

[FredC]

Did anyone ever figure out a fix for IE users? seems to ignore Margins and such and floats left when browsing with IE..

 

[BassMan]

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

<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]

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:

<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?