Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Stick nav not working

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Bamboo,

Sticky nav is not working. Regardless if the sticky nav is set to yes or no the behavior is the same: the logo and menu (in #navwrap) stay put and don't transform into the sticky nav (as expected if option was selected to "yes"). But the logo and menu stay stationary and overlay the page as it is scrolled. This happens using the defalut and modules only templates.

See joomla.jlnarducci.com for the behavior.

Jonathan
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
The administrator has disabled public write access.
Thats a weird one Jonathan.

Ive just tested here locally and it's fine but I cant see the necessary code for affix on your nav div.

Might need some access via a ticket to see what the issue is here.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

I had the latest version of T3 from JoomlaArt (1.3.0 which is now replaced with 1.3.1 - via their site). So I re-installed version 1.2.6 (which is the latest version from t3-framework.org/downloads.html)

I uninstalled Nebula and reinstalled it with a freshly downloaded version. The problem of the Sticky nav not working went away. If the option is selected then the sticky nav works as expected.

But if the option is not selected then the overlay problem still exists (logo and menu do not scroll with the page but overlay the rest of the page as it is scrolled).

I "fixed" it by changing the last line (z-index: 20;) in the following code:

#navwrap {
position: fixed;
float: left;
width: 100%;
padding: 30px 0 30px;
z-index: 20;
}

...to z-index: 1; and things seem to work as expected. Tested it with Sticky nav option on and off but probably not extensively and not sure why things changed with the reinstall except I was using "the wrong" T3 version.

Hope this helps.

Jonathan

UPDATE 7/6/13 @ 8:00 AM EDT - the fix is not a fix. When the banner height defaults for the template are used then the drop down menus (for Megamenu) are visible on the frontpage but hide behind the template positions that follow the banner position on the pages that have the smaller height. I can not find a z-index for other template positions or the one mentioned above that solve the problem.
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
Last Edit: 8 years 2 months ago by Jonathanne.
The administrator has disabled public write access.
Hi Jonathon,

I had to resort to a js solution for this one. So if the scroll position is above the gradient margin it behaves with z-index:20.

If the scroll position is below this then it drops back to z-index:1.

So the 1.3.1 update fixes this.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
The following user(s) said Thank You: Jonathanne
Anthony,

I installed the updates to the template. It worked for the frontpage

(which I use a modified version of modules-only - called modules-onlymod - because the the id value of contentleft was the same as the id value for the default template and it seemed to cause a problem with T3 layout modifications)

regardless of sticky nav turned on or not. Using default template for the subpages, when sticky nav is turned on the navwrap area turns into a sticky nav bar when scrolling occurs but when sticky nav is off the navsrap area overlays the scrolled up sections.

Bottom line, it still doesn't work.

When I scroll on the front page I can see the variable change values as you intended in the code. But when scrolling on sub pages the variable does not change. I looked at the js code: when I scroll and sticky nav on the html class for the front page navwrap area is "clearfix affix" where "affix" is used in the js code as a differentiation value in the if-else code. When I scroll on subpages that class value is "clearfix affix-top." The class stays at clearfix when sticky nav is not turned on.

I noticed that the js code uses the height of the area before the scrolled area to trigger the change in the z-index value. I use the defaults in themeMagic for these heights. Not sure my banner slide show might increase the height on the front page.

Hope this helps. Please let me know if you still need the ticket.

Jonathan
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
The administrator has disabled public write access.
Hi Jonathon,

Sorry about the false start.

Ive attached another fix here. The issue was that I was testing for the .fixed #gradient margin whereas it should have just been the #gradient.

I wont release this until you can confirm the fix.

Thans again for your help with this.

Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
And here is the file.
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Hmm not sure why it's not sticking.,
C:\fakepath\JB_Nebula_J2.5_J3.1_v1.3.2.zip
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Actually I see - try this:

dl.dropboxusercontent.com/u/908346/JB_Nebula_J2.5_J3.1_v1.3.2.zip
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
The following user(s) said Thank You: michaelsweet47
Change the same files?

UPDATE: The answer is yes.

The navwrap area does not overlay the scroll area as before, stick nav on or off. But on the subpages - small height area for navwrap and banner - if I click on menus with drop downs, the will overlap the gradient area as expected. But once I scroll and navwrap gets covered then the drop down menus hide behind the gradient scrolled area .

See joomla.jlnarducci.com/aboutjln.html and press the community or services menu item before you scroll. Then scroll and hide the navwrap area then go back to the top and click on the services or community menu items again - they will hide behide the area below the navwrap area.

Oh, this occurs sticky nav or not.

The z-index value stays at 1 once scrolling takes place for the subpages but not the front page where it becomes 20 again.

Jonathan
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
Last Edit: 8 years 2 months ago by Jonathanne.
The administrator has disabled public write access.
Anthony,

Anything I need to do to help with this?

Jonathan
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
The administrator has disabled public write access.
Hi Jonathon.

Sorry for the delay on this one.

Can you try this fix attached?

dl.dropboxusercontent.com/u/908346/template.js.zip

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Anthony,

Seems to work, both frontpage and subpages (modules-only and default) and for both sticky nav on and off.

Thanks for the fix.

Jonathan
  • Jonathanne's Avatar
  • Jonathanne
  • 12 Month basic
  • 439 posts
  • 7 Thanks
  • Karma: 6
The administrator has disabled public write access.
Hi Jonathan,

Thanks

I'll let Anthony now

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers