Header Menu Dropdown issue - Disappearing on bottom of screen in some desktop views

Hi, Can anyone help please? I have just been told that on certain desktop views, the header menu dropdown (Kent Businesses category) the menu falls below the screen, then when they move the cursor to scroll down the page, it closes the menu options, so they are unable to scroll though the options. 

I have attached a screenshot of something similar to what they can see. Can anyone help at all please?

Add this to Custom CSS, it limits the vertical height of the dropdown menu and adds a scrollbar so you can see all of the page links:

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    overflow-x: scroll;
    max-height: calc(100vh - 220px);
}

Let me know if that worked for you.

26 minutes ago, Ziggy said:

Add this to Custom CSS, it limits the vertical height of the dropdown menu and adds a scrollbar so you can see all of the page links:

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    overflow-x: scroll;
    max-height: calc(100vh - 220px);
}

Let me know if that worked for you.

Hi Ziggy, thank you for this suggestion, but unfortunately it took away all dropdown options and just added a scrollbar! Any other ideas at all? ( I have added a screenshot for you to see what I mean, but thank you!)... 

Sorry about that, try this adjustment:

.header-nav-folder-content {
    overflow-y: scroll;
    max-height: calc(~"100vh - 220px");
}

7 minutes ago, Ziggy said:

Sorry about that, try this adjustment:

.header-nav-folder-content {
    overflow-y: scroll;
    max-height: calc(~"100vh - 220px");
}

 

Thank you, that has worked, but do you know if there is anyway we can only show the scrollbar if it is needed? It is a bit ugly and is still showing on full desktop version, when the screen can fit the menu dropdown options. ... Or are we able to change the colour ... or are there any other options at all? ... Thank you for your help though, it is very appreciated!! 🙂

Okay, we can put it inside a media query like this:

@media only screen and (max-height:642px) {
  .header-nav-folder-content {
    overflow-y: scroll;
    max-height: calc(~"100vh - 220px");
  }
}

Give me a like if that worked.

4 hours ago, Ziggy said:

Okay, we can put it inside a media query like this:

@media only screen and (max-height:642px) {
  .header-nav-folder-content {
    overflow-y: scroll;
    max-height: calc(~"100vh - 220px");
  }
}

Give me a like if that worked.

That worked! Amazing, thank you so much for your help!!