Fix for making sticky mobile menu scroll now causes header / menu issues Sydney Pro

Hi Kharis

This is the website you’ve helped fix a few things on: https://www.thurstanhoskin.co.uk/

The final thing was to make the mobile menu scroll - as per this topic: Sticky mobile menu doesn't scroll

It did seem to be working fine but having gone back to the website to work on some content for the client I get the following things happen - in Firefox / Edge / Chrome:

  1. A vertical grey scroll bar has appeared to the right of the menu. The height of this varies depending on how wide the browser window is. If you can’t replicate this, try resizing your browser window:

  1. When you scroll down the page the blue header height extends to the height of the scroll bar, reducing the space for visible content:

As far as I’m aware nothing has changed since you helped get the scrollable menu working in the topic I’ve linked to above.

Can you help?

Thank you very much!

Nik.

I am sorry for the trouble. Try replacing this code:

    .scrollable-mobile-menu{
      overflow-y: scroll;
    }

with:

    @media only screen and (max-width:1024px) {
        .scrollable-mobile-menu{
          overflow-y: scroll;
        }
    }

Regards,
Kharis

Hi Kharis

Thank you for your quick response - that is so much better!

I’ve tested it by varying the width and height of the browser window and where the window is wide but height is not very high (a letterbox type shape), on scrolling the blue header covers a lot of the window still - see the screenshot below. You could (and I would!) argue that most viewers would not have browser windows of this aspect ratio but I suspect my client will tell me this needs to be fixed! Is there anything you can suggest to stop this happening?

I am more than happy to set you up as an admin user if that’s helpful.

Many thanks!

Nik.

Hi Kharis

Just bouncing this in case you’ve not seen it.

Thank you!

Nik.

Hello Nik,

Please try adding this additional CSS code:

    @media only screen and (min-width: 1025px) {
      .siteScrolled #masthead.site-header.fixed {
        
      }
      .siteScrolled .site-logo {
        max-height: 50px;
      }
      .siteScrolled .mainnav {
        height: auto !important;
      }
    }

Regards,
Kharis

Hi Kharis

That looks much better - thank you so much for your time on this.

Nik.

You’re welcome Nik!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis