Concertina menu in header element with drop down on hover appearing

  • Agent8
    July 2, 2026 at 6:48 am

    Hi,

    I’ve been asked to change my site navigation to include drop down items inside a vertical navigation. So that the drop down items appear on hover and push down the top level navigation items.

    I’ve tried applying the menu items but they overlay. Is this something I can get to work? Or do I need to somehow tap into the offscreen or mobile style of navigation and get it to work on desktop?

    Hopefully that makes sense. The idea is hover over one of the three top right items for the drop down items to appear and push down the rest of the navigation. Hopefully in a slick way as opposed to it suddenly appearing and everything jumping down massively.

    Thanks,
    Nick.

  • Ying
    July 2, 2026 at 8:20 am

    Hi Nick,

    Select the sub menu block, set its position to relative, switch to the CSS mode, and add !important to the CSS.

    Here’s a screenshot for your reference:https://app.screencast.com/NcB26TwMSWOYq

  • Agent8
    July 3, 2026 at 1:24 am

    Hi Ying,

    Thats great thanks. I’ve applied that and it works great.

    I’m also trying to get the final menu item to appear at the bottom of the screen bottom right as a hamburger icon to reveal some additional links. I have got this working by making the height of the header 100% and positioning that link to bottom. But this isn’t working at the top of the screen. The sticky styling needs changing to allow for it to be at the bottom. I’m not sure how to deal with this.

    Can you tell me what CSS I need to change to stop it from appearing at the top of the screen and be at the bottom when the page is scrolled to the top? If you scroll down you can see what I’m trying to achieve.

    Thanks you,
    Nick.

  • Ying
    July 3, 2026 at 9:54 am

    I see your CSS setting the .menuotherlinks to position absolute; try changing it to fixed instead.

  • Agent8
    July 6, 2026 at 1:35 am

    Thanks Ying. That fixed it!

  • Ying
    July 6, 2026 at 7:03 am

    Glad to hear that 🙂

  • Agent8
    July 8, 2026 at 6:32 am

    Hi,

    Sorry I’ve got another request on this navigation item at the bottom right of the screen.

    Is there a way I can get the sub navigation items to be visible on page load and then disappear on scrolling down?

    E.G. Only on the hamburger icon have it so you can see the sub navigation items as the page loads but then they hide as soon as you scroll down. Unless the user hovers back over the hamburger?

    Thanks,
    Nick.

  • Ying
    July 8, 2026 at 8:11 am

    Hi Nick,

    It will require custom JS, which is out of scope of the support forum.

    But I have something similar in my stack, so here you go, you can add this JS:

    <script>document.addEventListener('DOMContentLoaded', () => {
	const body = document.body;

	const handleScroll = () => {
		if (window.scrollY > 0) {
			body.classList.add('yh-scrolled');
		} else {
			body.classList.remove('yh-scrolled');
		}
	};

	// Check on page load
	handleScroll();

	// Listen for scrolling
	window.addEventListener('scroll', handleScroll, { passive: true });
});</script>

    And then add this CSS:

    body.yh-scrolled .gb-menu--base.gb-menu--hover li.menuotherlinks .gb-sub-menu {
    display: block;
    opacity: 1;
}

    Let me know if this helps!

  • Agent8
    July 8, 2026 at 11:47 pm

    Hi Ying,

    Many thanks for the code. I really appreciate you helping me with this.

    I’ve applied the JS as an element in the head and site wide. And added the CSS. But it doesn’t look like the class is being applied to the body? Perhaps I’m not looking the right way. The navigation items remain closed on page load.

    Am I applying this in the correct way?

    Thanks,
    Nick.

  • Alvind
    July 9, 2026 at 4:43 am

    Hi Nick,

    Try adding the JS to the footer instead.

    If it’s loaded in the <head>, there’s a chance the script is running before the required DOM elements have finished loading, which could prevent it from working correctly.

  • Agent8
    July 9, 2026 at 4:48 am

    Thanks Alvind.

    I’ve changed to footer and it hasn’t made any difference.

  • Ying
    July 9, 2026 at 7:40 am

    The class is there; the problem is the CSS. There was an extra . before body. Can you remove it?

    Let me know if it works this time 🙂

  • Agent8
    July 10, 2026 at 3:03 am

    Ah, brilliant. Works now thanks Ying.

    I swapped over the add and remove to get it to show the right way round.

    Thanks!

  • Ying
    July 10, 2026 at 8:14 am

    Glad to hear that 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.