Header issues after auto update on Pro

Hi there,

I had some issues a few weeks back with my headers showing gaps upon scrolling on all screen sizes (https://capropertypics.com). I posted and received some code to input into the header CSS - I was told that this was a known bug and that the css that was input would solve my problem (and it did!) but that it would be static, any other changes to the header could cause it to break. I haven’t made any changes to the header, but after upgrading to the newest version of pro I’m having issues with the headers showing gaps in different places on various screen sizes (upon scrolling). Any suggestions on how to fix the issue this time around? I cleared all caching plugins and followed the guide of what to do if your site looks broken after the update. Login info sent in secure note.

Thanks,
Dave

Hi Dave,

I went ahead and change the code in your Header CSS to fix the isssue.

Here is the code

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

.admin-bar .mysecondbar {
    top:60px !important;
}
}

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

    .logged-in .myfirstbar {
        top: 46px !important;
    }

    .mysecondbar {
        top: 26px !important;
    }

    .logged-in .mysecondbar {
        top: 72px !important;
    }
}

Please check in your end.

Thanks

Hi @paul.r,

Thank you for the help, I really appreciate it! That looks like it fixed the problems on my homepage. I apologize, I should have mentioned that I have one header for the homepage and a different one for the rest of the site, it’s called “Global Header”. The Global Header is still having issues with spacing, the problem with spacing is slightly different depending on the screen size. I tried to take the code you entered and copy it to the global header but it didn’t seem to fix the issue. Could you take a look at that header for me too please?

Also, with this code, does it mean the fix is static? If I change anything on the header should I expect issues to pop up? Is there anything I can do, or should be doing to avoid this problem happening again in the future?

Cheers,
Dave

Hi there,

Yes, it’s static and only applicable to your current setup. About your global header, I checked and the class myfirstbar and mysecondbar aren’t implemented into your header bar’s class. Please apply them to your global header too. Then add the same CSS.

Thanks!

I’m having trouble with my header as well after the update. michellebutler.ca everything is left justified/squished over. HELP!

Hi @Rad,

Gotcha, I checked the original header that’s been fixed (homepage header) - I have 6 bars since I have some hidden for different screen sizes. I only see “myfirstbar” and “mysecondbar” listed on two of those 6. Do they need to be on all of them? Because of that, I’m not sure which bars I need to place those classes into on the global header. (Apologies, I know nothing about css or classes, I rely completely on your support to get things working)

As an overall question, at one point I had these headers working without making them static and adding in css and classes. After several pro updates they started to break requiring these changes. Should I keep my fingers crossed that the bug will be fixed in future updates or should I expect to have to keep making manual changes that keep these bars static for the foreseeable future?

Last thing here - I have a bunch of css in my site that was entered when I was getting help from you guys in the past. It was all entered by going to Appearance > Customize > Custom > Global CSS. I’m not sure how much of it even applies anymore. I tried deleting it all in a staging environment and the site seems to be fine. Is there a chance any of the old code is causing issues and causing the headers to break?

Cheers,
Dave

@realtoryxe, I replied to your thread :slight_smile:

@davidgaiz It should be fixed in future updates, this issue is been around since the first version of Pro and a bit complex but our developers are still on it. If it’s working before and you probably have custom CSS before? Would you mind providing them?

The CSS above doesn’t match your 6 header bars, it’s only made for two. Would you mind providing more information how it was set-up before with 6 bars? How about restoring your site back to a stable copy of your site, then clone it in a staging then update it there. Then we can compare the two and see what’s the issue.

Thanks!

Hi @Rad,

There’s 6 bars in the current homepage header setup, that I got help in tweaking with css. The classes were only input into 2 of the bars, so I wasn’t sure which bars to input those classes into for the separate global header.

Things were working without any css for a while, that’s where I got confused. I had this same setup without any css originally and things worked great. Then through updates to pro overtime things started breaking and I came here looking for help. Any css in there was provided through support here. Everything is close, I’m still just having a gap on the pages other than the homepage that are utilizing that global header. Can you help me fix that gap?

I have two other sites using the same header setup, and the css varies between the sites. It seems like there is less css being used on the other sites - I put the login for those in a secure note.

Cheers,
Dave

Hi there,

I went to your website accessed the Pro > Header > Global Header > CSS option and added necessary changes to remove the gap between inner pages.

Please consider that I had to go to Users > Your Profile and disable the Toolbar as the top admin toolbar was causing the gap issue also.

All the fixes you see is temporary and you will need to wait for an update to have a solid fix regarding this case.

Thank you.

Hi @christopher.amirian,

I appreciate the help. In the past other staff members have used code that has accounted for being signed in and the tool bar height. Can someone else take a look at this and see if they can provide a better fix that keeps the tool bar in play when logged in? Also, the changes that you made eliminated my top bar with the phone number on it, when you scroll it disappears. I need to keep that visible. Lastly, the gap is still seen on mobile devices - screen shot attached.

If someone else can give this a look it would be greatly appreciated!

Thanks,
Dave

Hi Dave,

That space between Headline and copy content is the section’s padding, adjust that section’s padding to get the headline and copy text closer.

Regarding your header, your first bar should always be top: 0 !important; because you want that on the very top all the time regardless if the admin bar is present or not (unless you the admin is bothered by the first bar behind the admin bar, then you need to disable it under Users > Your Profile)

Your second bar should be top: 28px !important; because that is the height of your first bar. So the second bar starts where the first bar ends, eliminating the gaps between the 2 bars.

If your first bar change height, then you need to adjust the second bar top position as well, to avoid the issue of getting an overlapping bar or having spaces between bars.

Hope this shed some lights,
Cheers!

Hi @friech,

Thanks for the response, sorry if the last message wasn’t clear, the space I was talking about is inbetween the two bars on the header, not with between the headline and text. In the screen shot above, it’s the space that’s between the bar that has “Book your appointment today” and the logo with the collapsed nav. Those two bars should be together. Also, with the changes made by Christopher previously, the top bar with the phone number now disappears when you scroll down the page. This is all in regards to the “global header”.

I’m trying to fix the issue of the gap between the bars on the device sizes where the problem exists, and make sure they function properly when scrolling down the page. I have similar css in there to what you recommended as well. Login info is above, can someone login and take a look and see if they can help me fix this?

Thanks,
Dave

Hi Dave,

I made some adjustments to your Header css to fix that.

@media(min-width: 768px){
    .mysecondbar {
    top:0 !important;
}

.admin-bar .mysecondbar {
    top:0 !important;
}
}

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

    .logged-in .myfirstbar {
        top: 46px !important;
    }

    .mysecondbar {
        top: 0px !important;
    }

    .logged-in .mysecondbar {
        top: 46px !important;
    }
}

Kindly check in your end.

Thanks

Hi @paul.r,

Thanks for the help!

For the larger screen sizes:
I’m still seeing the header not show the top bar with the phone number upon scrolling down. This is for the other pages, not the homepage. These pages are using the header called “Global Header”. SS attached of what I’m seeing after clearing caches.

For the smaller screen sizes, there are other issues as well, ss attached for those too.

Thanks,
Dave

Hi there,

I entered your website and did try to find a fix regarding the problem you are talking about the Book header and the lower one. But unfortunately, I could not find a good solution. I did spend so much time and I don’t know why it is working on the homepage but not the inner pages.

Actually, these codes we suggested are all band-aids and does not resolve the actual problem which is the bug we have for the 2 static headers.

The matter is under heavy development and if you check our latest news about the development cycle you will see that it will be fixed in the upcoming release in April:

I suggest that at the moment you avoid adding these band-aid codes and turn off the sticky headers for the time being. Let’s wait for the official release.

Thank you for your understanding and patience.

Hi @christopher.amirian,

I understand what you’re saying, and thank you for taking the time to look. I’d appreciate it if others could take a look, I’ve received some amazing support from some of the other staff members here with these band-aid codes in the recent past. All of my sites are built using these sticky headers, so going away from them for now is not an option.

I still don’t understand what happened to the top bar with the phone number, it was showing until you made your initial changes and now it’s still gone when you scroll down. I’d love for that bar to come back, and for someone to provide some bandaid code to get me through until the bug is fixed.

Dave

Hello Dave,

Thanks for getting back to us.

I have check your site and this is what I am seeing:

It seems that the phone numbers is now displaying. If you are not seeing anything, please clear your browser cache or use private browsing mode in testing your site. And since you are using SiteGround, could you please clear your site cache or disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

By the way, I noticed that you are using an older version of the theme. Please update it to Pro 2.0.4, clear the caches and test your site again.

Hope this helps.

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