Navbar fixed question

[CTS]

I have seen a couple XF sites with navbars that stick to the top of a page fold when scrolling down.

I cant seem to find the code or addon here.

Anyone know of this?

 

[Paul B]

It is part of the third party styles - I'm not aware of a standalone modification just for a sticky nav - but you can try searching the resources.

 

[CTS]

Thank you Brogan.

I kinda suspected that it was part of a style.

Appreciate the heads up.

Mark

 

[rainmotorsports]

There actually was an addon from bassman i think. It was free and then wasnt after that. For stock based themes only. I can give you some starter code if you have any skill in html and css to do it.

 

[CTS]

I have the skills, and am still on stock style, so yes that would be awsome!!

 

[rainmotorsports]

I have the skills, and am still on stock style, so yes that would be awsome!!

Alright I will try to get it out to you tonight or tomorrow. Our stuff is a bit more custom but basically the stock navbar is wrapped in a div. Javascript/jquery applies properties to that div under certain conditions. My current design loses the tablinks below but thats not hard to keep. Probably some minor tweaks needed to be added but I will try to work it against the stock theme as well as sending my current example.

 

[CTS]

Thank you sincerely.

 

[rainmotorsports]

I didn't forget about you. Busy yesterday. Bad headache today (might be CO poisoning, exhaust in the car split in half).

Yesterday I found bassman's addon in case you are interested in that - https://xenforo.com/community/resources/cxf-sticky-navigation.3614/ It looks like his implementation moves the search and it looks a little funny. However it is a cheap solution to get the whole thing to mesh together.

However if you look at www.digitalpoint.com he just has a gradient of white at the bottom to keep the search where it is. I am aiming to help you do it more that way.

Right now I can't really concentrate but as far as the javascript this is how I did mine. It's probably not the most efficient way but its simple in concept http://www.tbgclan.com/js/tbgremastered/tbgstickynavbar.js

It's twice as complicated as it needs to be if you want floating nav at all widths. I removed it for low width's. This required finding a way to check if the window size changed. So there is like 3x as much code as needed otherwise.

Primarily how it works is the container for navigation has a class NavStatic. This class contains properties for where the navigation normally sits. What we do is create a second css class called NavFloat that sets things like position: fixed; top: 0px; other parts of the menu may need adjustments as well and thats why the code swaps classes to other elements.

<div id="menucontainer" class="navstatic <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">modbarmargin</xen:if>">
<div id="menuleft" class="navstatic">
<div class="navTabs">

Unfortunately without me redoing this for a stock theme as you can see above my navTab div is wrapped into 2 other div's. The menu left exists because of our style having left and right background sections. Furthermore I added a seperate div to contain the whole thing which isn't needed in the stock style version i dont think. However if you look closely I add a class for modbarmargin if the moderator bar is present. This is very much needed otherwise the moderator bar gets covered up.

I will help more when I feel better and have more time.

 

[rainmotorsports]

Okay I am working on the stock theme and I have a simple example based on Digital Points version. It needs 2 things. The gradient to disappear on mobile and some accommodation for the moderator bar.

Add this in the header template:

<script type="text/javascript">
jQuery(document).ready(function ($){
    $(window).bind('scroll', function() {
        var navHeight = ( $(window).scrollTop() );
            if (navHeight > 160) {
                $('#header').addClass('navfloat');
                XenForo.updateVisibleNavigationTabs();
                    }
            else {
                $('#header').removeClass('navfloat');
                XenForo.updateVisibleNavigationTabs();
            }
    });
});
</script>

Add this to the header.css:

#header.navfloat
{
        top: -48px !important;
        position: fixed !important;
        box-shadow: white 0px 20px 20px;
        z-index: 10000;
}

You may need to adjust the start height in the javascript and the top offset in the header.css. But this will basically get you a floating navigation on a stock based theme. Plenty left for me to do though.

The XenForo.updateVisibleNavigationTabs(); may not be needed at this time but it wont hurt too much either.

 

[rainmotorsports]

Almost done. Okay so this time one change to the header template not just the additions.

Header add:

<script type="text/javascript">
jQuery(document).ready(function ($){
    $(window).bind('scroll', function() {
        var navHeight = ( $(window).scrollTop() );
            if (navHeight > 160) {
                    $('#header').addClass('navfloat');
                    $('#moderatorBar').addClass('navfloat')
                XenForo.updateVisibleNavigationTabs();
                    }
            else {
                $('#header').removeClass('navfloat');
                $('#moderatorBar').removeClass('navfloat');
                XenForo.updateVisibleNavigationTabs();
            }
    });
});
</script>

Header change:

<div id="header" class="<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">modbarmargin</xen:if>">

CSS add:

#header.navfloat
{
        top: -50px !important;
        position: fixed !important;
        z-index: 10000;
        box-shadow: white 0px 20px 20px;
}

#header.navfloat.modbarmargin
{
top: -25px !important;
}

#moderatorBar.navfloat {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10001;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    #header.navfloat
    {
        box-shadow: none;
    }
}
</xen:if>

Still needs some work, as before if your header height is different due to logo and adjustments you will need to tweak the top values in css and the activate value in the js.

Need to deal with the menu z-index next. The reason I have the z-index so high is because on my site jaxel has z-index's of 9999... lol

 

[rainmotorsports]

I worked out all the issues and posted it as an addon. Assuming your header isn't too far modified or not improperly done it will work. If not you can always salvage the template mods for the javascript and css.

https://xenforo.com/community/resources/raindd-floating-navigation.5170/

 

[CTS]

I thank you sincerely.
Will be doing the addon this weekend.

Someone buy this person a beer!

 

[rainmotorsports]

No problem. I don't really intend to maintain it but I think tomorrow I will add a style property for the box shadow so it works on none white paged themes lol.