Sydney Pro menu fix still causes issues (some time later!)

Sydney Pro
#1

Hi Kharis

I hope you’re well.

A while ago you very kindly helped with some fixes to the header on one of my Sydney Pro websites: Fix for making sticky mobile menu scroll now causes header / menu issues Sydney Pro

My client now wants the image header on the home page only and when I changed this in the Customizer Header Type, on all the pages where the image header does not appear (i.e. all except home page) the blue header drops down to cover the content and a second contact header appears underneath the blue.

image
image1385×956 78.3 KB

The link to the dev site is here - I cloned the main site this morning to make this: https://www.thurstanhoskin.co.uk/dev/

Would you be able to take a look? Happy to add you as an admin user if that helps.

Thanks very much.

NIk.

#2

Hi Nik,

Thank you for getting back.

If I could get your problem correctly, you’d add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header > .header-contact {
      display: none !important;
    }

Regards,
Kharis
aThemes Support

#3

Hi Kharis

Thanks for getting back to this.

The new code yhou suggested has stopped the contact bar (with phone no etc on) from being sticky so it disappears when you scroll down - I need to keep this feature. And the blue from the header filling the whole screen on pages without the header image is still happening - as seen on this page https://www.thurstanhoskin.co.uk/dev/our-services/:

image
image1920×1080 227 KB

So I have removed your new code so it’s hopefully easier for you to take a look.

Could you let me know something else to try?

Many thanks

Nik.

#4

Hi Nik,

​Please accept my apologies for the delay in response. I really appreciate your patient.

Can you share me the screenshot to your current header type setting under the Appearance > Customize menu? Perhaps it could help me on finding the root of this problem.

Regards,
Kharis
aThemes Support

#5

Hi Kharis

No worries at all. Here we go:

image
image347×716 25.2 KB

Nik.

#6

Hi Nik,

Thank you for sharing the screenshot.

What will happen if you also enaled the header image for Site header type?

Regards,
Kharis
aThemes Support

#7

Hi Kharis

I’ve enabled the image for Site Header Type:

image
image328×685 17 KB

And it all looks as if it’s working fine. (But my client has decided that they only want the header image on the home page, which is what has started this issue.)

(There is still a double contact menu on the mobile version but I was going to address that separately once my client is happy with the desktop version.)

Thank you - I look forward to hearing from you!

Nik.

#8

Hi Nik,

Great! You’re welcome!

To avoid double contact menu on mobile, try adding this CSS code to your website’s Additional CSS.

    @media only screen and (max-width: 1024px) {
      .site-header > .header-contact {
        display: none !important;
      }  
    }

Regards,
Kharis
aThemes Support

#9

HI Kharis

I’m really sorry, you’ve misunderstood my original problem.

The client only wants the image header on the home page (well actually on several pages but not all of them - perhaps you have a solution for this?).

So the original setting I had for the header type (below) was correct:

image
image347×716 25.2 KB

but this causes the blue header to extend over the whole of the screen on all the pages with no header image.

BUT is there a way to keep the header type settings as they currently are (header image on all pages) but hide it on certain pages? This would be an ideal solution.

The bit below works brilliantly - thank you :grin:!

To avoid double contact menu on mobile, try adding this CSS code to your website’s Additional CSS .

    @media only screen and (max-width: 1024px) {
      .site-header > .header-contact {
        display: none !important;
      }  
    }


Many thanks. 

nik.
#10

Hi Nik,

Thank you for getting back.

You can try adding this CSS code to your website’s Additional CSS.

    .page-id-388 .sydney-hero-area .header-image {
      opacity: 0;
    }

    .page-id-388 .sydney-hero-area {
      background-color: #ccc;
    }

You’ll need to adjust the page ID number in this selector: .page-id-388. You can easily get it when you’re editing a page. The ID number is shown on your web browser’s address bar. It usually looks like this:

https://yoursite.com/wp-admin/post.php?post=388&action=edit

Or, use this plugin for simpler way.

I hope this reply helps.

Regards,
Kharis
aThemes Support

#11

Hi Kharis

Thanks, that works really nicely: https://www.thurstanhoskin.co.uk/dev/commercial-conveyancing/

I’d like to reduce the gap between the last menu item (Contact Us) and the bottom of the blue header so that it’s not taking up so much room. I tried height: 400px; which works but leaves a large gap on the mobile version, so no good. Can you suggest better code for this?

Many, many thanks!

#12

You’re welcome!

So you want the menu items be in single line? Please confirm. If so, you may need to reduce the font size on the menu items. And I could suggest custom CSS code for that.

Regards,
Kharis
aThemes Support

#13

Hi Kharis

Thanks for your message

Sorry, what I want is to reduce the blank gap shown with the red arrow on the screen shot below on this page: https://www.thurstanhoskin.co.uk/dev/commercial-conveyancing/

image
image1661×995 209 KB

I hope that makes sense.

Many thanks.

#14

Hi,

Thank you for the screenshot.

Try adding this CSS code:

    .page-id-388 .sydney-hero-area .header-image {
      height: 375px !important;
    }

And adjust the page ID selector.

Regards,
Kharis
aThemes Support

#15

Hi Kharis

Thanks - this is looking good (I haven’t put it on all pages I need to yet but think it will be fine!).

Thank you so much for your help and patience. It’s appreciated.

Nik.

1 Like
#16

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
aThemes Support