Sticky contact bar overlaps menu bar on desktop, not sticky at all on mobile


#1

Hi Kharis

I hope you’re well!

I’m currently working on this website: https://cornishboltholes.co.uk/

I have attempted to make the Contact bar sticky at the top for both desktop and mobile versions using the suggestion in this topic but I have two issues:

  1. It works for the desktop version but the Contact bar overlaps the header/menu bar which should be below it when you scroll down. EDITED TO ADD: I’ve just realised it overlaps only on the home page.

  2. It doesn’t work for the mobile version (in fact the Menu bar isn’t sticky either but I need it to be sticky too).

I’ve checked my custom CSS and can’t see anything that’s making this not work. Can you help?

Many thanks

Nik.


#3

Hello there,

If I got those correctly, you’d try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .site-header.float-header .header-wrap {
        padding-top: 35px;
      }
    }

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

Regards,
Kharis


#4

Hi Kharis

Thank you - that has cured the overlap on the home page for desktop.

But now only the Site Name and menu icon show for the mobile version (but they are sticky, which is great, thank you!). Is it possible to make the Contact bar show and be sticky too for mobile?

Big thanks

Nik.


#5

Hello Nik,

Try adding this extra CSS code:

    @media only screen and (max-width: 1024px) {
      #masthead .header-contact {
        display: block;
      }
    }

Regards,
Kharis


#6

Hi Kharis

Thanks for that - I’ve added it, cleared the cache but it doesn’t seem to have made a difference, sorry!

Nik.


#7

Hi Kharis

Sorry to bother you but wondered if you’d had time to look at this?

Huge thanks

Nik.


#8

Hi Kharis

I’ve just been looking at the website on a Desktop and noticed that on all pages except the home page, there is now a gap between the Contact bar and the Site Name on scroll down (shown by the red arrow on the screen shot below), caused by the 35px padding in your first bit of code:

I know my client will point this out to me!

So, is it possible to eliminate that and to also get the Contact bar sticky in the mobile version?

Many thanks

Nik.


#9

Hello Nik,

I visited your site again and it seems like you’ve already been able to reduce the extra space. Is that correct? To display the contact bar on mobile, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

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

Regards,
Kharis


#10

HI Kharis

Thanks - the previous code just needed an !important in it and it’s now working.

No the gap is still there on all pages except the Home page - it shows up when you scroll down the page, as shown in my screen shot above. My client has noticed it and so it does need to be removed.

Thanks again for your help!

Nik.


#11

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


#12

HI Kharis

Sorry, it’s not all sorted yet - you missed my comment below about the gap - it is still showing! Can you help:

Thanks!

Nik.


#13

I am sorry.

Try this code:

    @media only screen and (min-width: 1025px) {
      body:not(.logged-in):not(.home) .site-header.float-header .header-wrap {
        padding-top: 0;  
      }  
    }

Regards,
Kharis


#14

Thanks Kharis, that’s looking great. I hope that’s it for this website but if there’s anything else I’ll start a new topic.

Thank you so much for your help.

Nik.