Public Forums 71,145 posts

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1026133

Does anyone here know how to use Bootstrap ‘affix’ with the Joomla T3 Framework to create a scrolling sticky nav? I need help making this work properly.

Assume a typical T3 layout with header – navbar – mainbody – footer.

With a scrolling sticky nav, the page scrolls normally until the navbar reaches the top of the page, at which point the navbar becomes fixed while the rest of the page continues to scroll up "underneath" it.

It is a simple customization, only requires 2 template changes:

1 – change line 12 of mainnav.php to this:
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">

2 – insert the following under navbar.less line 291 .t3-mainnav {
&.affix {
position: fixed;
top: 0;
z-index: 10000;
width: 100% !important;
}

That’s it. You adjust the data-offset-top value to control when the affix event occurs.

Here’s my problem: at the moment of the affix transition event, the navbar is removed from the page content, so the entire page jumps up an amount equal to navbar height. It’s ugly.

I’ve read about a simple solution: put the navbar in a div wrapper that is not affected by the affix function, then set the wrapper height same as navbar height. I tried several times to make this work, bit I can’t figure it out.

I need to know which file(s) to change, and how to do it.

I’m using the latest versions of joomla, T3, and t3_bs3_blank. My customizations are being made to a cloned theme, with all changes being made within local folder.

The site is not live, only on my xampp at home.

Thanks!

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1026328

Here’s the shorter version:

I need a wrapper for the navbar, and I need to set the height of the new wrapper to the same height of the navbar (55px).

What I tried:
Make a new wrapper in mainnav.php, set the height of the new wrapper in variables.less.

It didn’t work.

Currently, my scrolling sticky navbar works fine using the simple steps described above.

Here is my problem:
Affix removes the navbar from the page content at the affix event, causing a jump.

Here is the likely solution:
Wrap the navbar in a new wrapper that is the same height as the navbar.
The new wrapper is excluded from the affix event.
Since the wrapper is not removed at the affix event, the page content does not jump up.

How do I do this?

Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1026705

Hi,

You can share the URL of the page where I can see it ‘jumps’ to I will take a look.

Regards

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1026834

Thanks Saguaros!

http://www.2avoters.org

Go to the Scroll Test page.

As you scroll down, notice that the navbar becomes sticky when it reaches the top of the browser window. At that instant, the navbar is removed from the page content, so the page content jumps up 55px, which is the height of the removed navbar.

I think the solution is a 55px navbar wrapper that is outside the affix spy event.

I need to know how to make this wrapper, and style it 55px height.

Thx!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1026888

Could you try with this css?

.t3-mainnav.affix + div {
    padding-top: 71px;
}

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1026955

Thank you, but that didn’t change anything. I tried with 171px also, just to try to learn what you were attempting. It didn’t affect anything.

I think I need to put the navbar in a 55px wrapper that is outside the affix function.

I’ve been reading about how to do this, and I have tried several things, but I can’t figure it out.

It’s a little frustrating because it seems like this would be very simple.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1027052

You can share the Admin & FTP account so I will take a look.

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1027829

Solved:

In local mainnav.php, place a div wrapper around the entire navbar:

<div class="nav-wrapper">
 // everything
</div>

In local navbar.less, style the new wrapper:

.nav-wrapper { 
   min-height: 57px; 
}

Adjust the style value (here 57) to make the wrapper the same or slightly taller than the height of your navbar.

Thanks.

[Author]

Posts