• what I mean is for the menu with lots of items, to be limited in length and to have like a arrow to click to show more items.

    in my page above, click on the Moth Families – Micros menu – you can see it scrolls way below the page height.

    Hope I’ve shown what I mean

    thanks

    Richard

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi @rpittam,

    Actually, that’s how it works. Since the number of the submenus is huge, it causes the very long list, and since the list is taller than the height of the page itself, it looks strange like that.

    You can create a Mega Menu as a workaround for such scenario. However, Mega Menu comes only with the Astra Pro plugin.

    Let us know if you need more help, otherwise please mark the topic as Resolved.

    Kind regards,
    Herman ??

    Thread Starter RPittam

    (@rpittam)

    hi Herman

    thanks for that.

    I was looking for a limiter where , when the sub menu reaches the bottom of the page/container, then the menu is capped there and has a scroll facility so that you don’t have to scroll the page down. I was Googling overflow css code, such as

    .navbar-inverse .dropdown-menu > li > a {
      width: 185px;
      height: 400px;
      overflow-x: hidden;
      overflow-y: scroll;
      z-index: 1000 !important;
      position: fixed !important;
    }

    but I cannot make it work in the Astra Customise css facility.
    I am relatively new to this css stuff, which is why I came on here.

    cheers

    Richard

    Hi @rpittam,

    I believe the class should be sub-menu. However, since the submenu you would like to show in a scroll is submenu of a submenu, I don’t think targeting the sub-menu class will work. You can try by adding custom class to the submenu of the submenu. Refer to this screenshot, please.

    I hope it will help.

    Kind regards,
    Herman ??

    Thread Starter RPittam

    (@rpittam)

    Herman.

    Just putting this css code into the Astra Additional CSS worked fine. I could not get it to show scroll bars all the time, but made the max-height such that it half showed the next menu item, so was more obvious there were more items below.

    .sub-menu ul {

    max-height: 757px;

       overflow-y: scroll;

    }

    Thanks

    Richard

    Thread Starter RPittam

    (@rpittam)

    Herman.

    Nearly worked, however, it only applies to the 1st level sub-menu and the remaing 2 sub-menu levels do not display. I looked at the code inspect and all the levels are referred to as the .sub-menu ul class, so not sure why it does not apply the class rule to those also.

    I tried adding a custom class to the sub-menu item in the wordpress menu slot, but this broke my menu altogether.

    Do you have any other ideas, or anyone out there for that matter – it must be a simple solution to to you all.

    pictures show what mean.

    https://www.derbyshiremoths.org/downloads/Screenshot1.png

    https://www.derbyshiremoths.org/downloads/Screenshot2.png

    https://www.derbyshiremoths.org/downloads/Screenshot3.png

    Thanks.

    richard.

    Hi @rpittam,

    Have you tried adding custom class as I mentioned in my previous comment? Pretty sure it will work.

    Apart from that, just to set your expectations with our support right. We are not offering support for customization or custom code. Sometimes we do. However, it can be considered as an exception.

    Well, let’s see if there’s someone here in the community will be so kind sharing their thought. Or you can try ChatGPT. See if you can find this famous robot helpful for your case.

    Kind regards,
    Herman ??

    Thread Starter RPittam

    (@rpittam)

    Hi Herman.

    Yes, I did try it broke my menus but I’m not an expert by any means.

    I’m not expecting custom support just maybe a pointer in the right direction that’s all.

    Never mind, I’ll keep trying.

    I’ve only tried GPT for writing blogs ??.

    thanks

    Richard

    Thread Starter RPittam

    (@rpittam)

    ChatGPT gave me this, but it doesn’t work either.

    /* Ensure this CSS applies to submenus in Astra theme */ .ast-site-header .ast-site-header-navigation .ast-menu-toggle + .ast-site-header-navigation .ast-nav-menu .sub-menu { max-height: 757px; overflow-y: auto; }

    /* Additional styling for multi-level submenus if needed */ .ast-nav-menu .sub-menu ul { max-height: 757px; overflow-y: auto; }

    The single .sub-menu command makes the 1st sub-menu limit and vertical scroll but then the 2nd level menus will not show. When i add further .sub-menu the 2nd sub-level shows, but the vertical limit scroll is lost on the 1st level again see code below

    /* Additional styling for multi-level submenus if needed */
    .ast-nav-menu .sub-menu .sub-menu ul {
    max-height: 757px;
    overflow-y: auto;

    This is fast giving me a headache as i think i am almost there but…… sadly not.

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