Need help fixing errors with headers

Support
#1

Hello,

I need a little bit of help figuring out how to fix my headers on https://CAPropertyPics.com. I have two headers being used on the site - one for the home page and one for all of the other pages. The homepage header has a transparent to solid transition, and the global header for the other pages is just solid.

Issue with the homepage header
In regards to the homepage header, the problem I’m running into is that the header is getting split with a transparent area in the middle between the two bars once you start scrolling down the screen. I had them together at one point and can’t figure out what happened. This is happening for the largest 3 screen sizes (768px and higher). The smallest 2 screen sizes (767px and lower) show the two bars together but have a transparent gap on top that shouldn’t be there. Any insight would be greatly appreciated here!

Issue with the global header
With the global header which is used everywhere except the homepage, I’m having the same issue where the bars in the header get split by a transparent area when you scroll down the page - this is happening on all of the screen sizes. Again, can’t figure out what I didn’t configure correctly here, any insight would be appreciated!

Login info is attached.

Thank you!
Dave

#2

Hello Dave,

Thanks for posting in! I have logged in and edited your headers.

1.) To resolve the issue for the homepage header, I added this custom css:

@media(min-width: 768px){
    .hm28.x-bar {
        top: 28px !important;
    }

    .logged-in .hm28.x-bar {
        top: 58px !important;
    }
}

@media(max-width: 768px){
    .hm25.x-bar {
        top: 0 !important;
    }

    .logged-in .hm25.x-bar {
        top: 46px !important;
    }

    .hm28.x-bar {
        top: 46px !important;
    }

    .logged-in .hm28.x-bar {
        top: 72px !important;
    }
}

2.) For the global header, I also edited it and added this custom css:

@media(min-width: 768px){
    .hm9.x-bar.x-bar-fixed {
        top: 27px !important;
    }

    .logged-in .hm9.x-bar.x-bar-fixed {
        top: 56px !important;
    }

    .hm20.x-bar.x-bar-fixed {
        top: 27px !important;
    }

    .logged-in .hm20.x-bar.x-bar-fixed {
        top: 56px !important;
    }
}

@media(max-width: 768px){
    .hm6.x-bar.x-bar-fixed {
        top: 0px !important;
    }

    .logged-in .hm6.x-bar.x-bar-fixed {
        top: 46px !important;
    }

    .hm20.x-bar.x-bar-fixed {
        top: 27px !important;
    }

    .logged-in .hm20.x-bar.x-bar-fixed {
        top: 56px !important;
    }
}

Please check your site now.

#3

Hi @RueNel,

Thank you very much for the help! It’s almost completely fixed, the only problem I’m still having is a gap between the bars on my ipad and iphone for the homepage only (the solid versions once you start scrolling down), the larger resolution versions seem to be fine. Any clue on how to fix those?

Also, it’s interesting because I had the headers working correctly without any css, when I added in the last few bars to adjust the alignment of certain things like the phone number or booking button on mobile devices is when I had the problems arise. When I tried to get rid of those new changes and go back to the original setup that worked - I found I still had the problems. Any reason behind this so I can try to avoid it in the future?

Thanks!
Dave

#4

Hi there,

It’s known the bug when there is are multiple header bars and the other one is sticky. It calculates the entire header bar height instead of he visible one. The recommended CSS should fix it but, it’s static, any change you will make in your header will also require adjustment to the given CSS, example

Please change this CSS

.hm28.x-bar {
    top: 46px !important;
}

to this

.hm28.x-bar {
    top: 26px !important;
}

It’s for iPhone view. So please change the CSS accordingly depending on where you view it.

Thanks!

#5

Hi @Rad,

Thank you very much for the help! If this is a known issue, I’m assuming it’ll get fixed at some point in a future update right? The reason why I ask is so that I know if I’ll need to remove any of this CSS in the future after an update.

Also, I’m not overly savvy with entering in CSS or knowing exactly where to put it, is there anyway you can pop it in there for me or tell me where I should put it? Also, you mentioned that bit of code was for the iphone view, could you provide or enter the code for the next two screen sizes up as well that are having the same issue please?

Thank you!

#6

Hey There,

The custom css can be added when you edit your header. It can be found at left pane of the header builder.

So I went ahead and change the css already.

Please let us know how it goes.

#7

I think it’s all straightened out now, thank you very much for your help @RueNel & @Rad!

#8

Glad that we could be of a help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.