Home Forums Particles Support Headroom atom

Viewing 10 posts - 1 through 10 (of 10 total)
  • Avatar
    Magh Samana
    Subscriber

    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 11 months, 4 weeks ago by AvatarMagh Samana.
    Avatar
    Magh Samana
    Subscriber

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

    • This reply was modified 11 months, 4 weeks ago by AvatarMagh Samana.
    Avatar
    Tony
    Moderator

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

    franktoo
    franktoo
    Subscriber

    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!

    Avatar
    Tony
    Moderator

    “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
    franktoo
    Subscriber

    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.

    Avatar
    Tony
    Moderator

    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.

    Avatar
    Tony
    Moderator

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

    franktoo
    franktoo
    Subscriber

    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.

    Avatar
    Tony
    Moderator

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

JoomLead Gantry 5 Particles 2.1.0 released. New features, WCAG 2.0 accessibility and bug fixes See changelog
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now