Headroom atom

[Magh Samana]

Hello,

I installed the Headroom atom on a Gantry 5 site. The slide animation works fine on the navigation bar, but in smaller devices when the hamburger menu appears, this doesn’t get included in the navigation slide. Is there a workaround this?

• This topic was modified 5 years ago by Magh Samana.

[Magh Samana]

Or to disable the slide animation completely, for phones and tablets.

• This reply was modified 5 years ago by Magh Samana.

[Tony]

The animation is disabled on mobile devices, could you please give me your site to take a look ?
Thanks

[franktoo]

Hello, I still have the same problem with Headroom Atom in Grav 1.6.22.

The hamburger menu is not shown again in mobile mode when scrolling up.

Demo site is here: https://hoemei.frank-sieber.de/.

By the way, “Grav” is not mentioned anywhere on joomlead.com site. Only Joomla and WordPress. But I use Grav.

I bought the Gantry 5 Particles some minutes ago.

Hope I will not get any problems or issues, because I am not using Joomla or WordPress.

Thanks for your help!

[Tony]

“By the way, “Grav” is not mentioned anywhere on joomlead.com site. Only Joomla and WordPress. But I use Grav.”
Our particles working perfectly for Joomla/Wordpress/Grav :). Just few particles designed for special platform, like content grid for Joomla and WordPress(present the joomla articles and wordpress posts). We are planing to add content grid support for Grav in the next release.

“The hamburger menu is not shown again in mobile mode when scrolling up.”
The headroom working for the menu which assigned to navigation section only(stick the navigation section on the top when scrolling up), the offcanvas menu (hamburger icon) is not assigned to navigation section.
The solution:
Create custom javascript code then moved the icon into navigation section 🙂
Example:

(function($) {
	// Move the Offcanvas Toggle button in the Header
	$(document).ready(function() {
		$("div.g-offcanvas-toggle:not(.offcanvas-toggle-particle)").prependTo($("#g-navigation"));
	});
})(jQuery);

NOTE: We just created free sticky atom (uikit3) for Joomla/Grav/Wordpress, you can grab it here https://www.dropbox.com/s/ktfraspbicvgom2/jlnavsticky.zip?dl=0 (We will add the package for free particle collection soon).
The JL nav sticky support sticky feature and sticky on scroll up like headroom atom. It also support device sizes for mobile/tablet. You can remove the headroom atom and use the nav sticky instead.

@Magh Samana: With nav sticky atom, now you can enable/disable sticky for mobile devices 🙂

Thank you

[franktoo]

Oh wow, thank you very much. With this JS both headroom and navsticky work.

Navsticky is even smoother than headroom when scrolling over the header (the thing between naviation and intro in g5_helium theme). It does not make such a hop during scroll, as with headroom.

But there is a little issue left. The issue is the same with headroom and navsticky: The menu is only sticky or scroll-sticky for screen widths of at least 640px. This seems to be defined in file ./user/data/gantry5/themes/g5_helium/css/jluikit.min.css constant named jl-breakpoint-s. I can’t see any config param for this in Gantry settings.

For screens narrower than 640px the site behaves as if there were no headroom or navsticky enabled at all.

Can you please give a hint or explaination for this, if you know?

Sorry, but the site behind the link https://hoemei.frank-sieber.de/ is not updated any more. So it can not be used as base for discussion about this.

[Tony]

Hi Frank,
I’m still testing the nav sticky atom before adding it for free particle package. At the moment, the nav sticky support device sizes Small (Phone Landscape), Medium (Tablet Landscape), Large (Desktop), X-Large (Large Screens).
I will add the Always option to make the nav sticky appear on all screens.
Please wait 🙂
NOTE: If you use nav sticky, you don’t need to use the headroom atom for page speed performance :), the nav sticky already support sticky on scroll up like headroom atom.

[Tony]

Here please use this package https://www.dropbox.com/s/ktfraspbicvgom2/jlnavsticky.zip?dl=0

[franktoo]

Hello Tony, thank you very much. The new ‘always’ option did the trick with screen widths smaller than 640px. This option should be added to the jlheadroom atom too, because it has the same issue. Note: In my opinion it is an issue. Other people might think different.

[Tony]

Headroom atom stick the navigation on all screens. The problem that your helium (or hydrogen) not assign the offcanvas to the navigation on mobile so that why you can not see the Headrrom navigation on mobile.
Please read my prev comment https://joomlead.com/forums/topic/headroom-particle/#post-220781

You should add the custom js to move the menu bar icon to navigation section so you can see the headroom js working on mobile.

Or simply add any content to navigation section(like button or social icons) then resize browser to see what I mean.
Thank you