Archived topic
Border line under header in Chrome
6 replies · Started by Dan on March 17, 2021
Hello. I am creating a one page site that, when the browser window is changed in width, a light colored (white?) line appears under the header where the navigation is located. As the window is being shrunk or enlarged, you can see the line appear and disappear. This only happens in Chrome. I am using Siteorigin Page Builder with GP Premium and have a background image set on the first row below the header. I checked the background image and it doesn't appear to have a line at the top that would be lighter than the actual background color. I tried giving that row a margin-top:-2 px; to see if it would close any gaps, but that didn't work. Unfortunately, the line appears while viewing the site on a specific sized laptop that my client uses, so they see it all the time. Any ideas?
I just tried something new and it seemed to get rid of the line. I originally had the page set to disable the header, which is a function of the page builder, but when I unchecked the disable header option, the line disappeared. I don't want the site logo present on the home page, but if more pages are added later, I do want the logo to be there. So I will instead try some css to hide the header logo just on the home page and see if that works. I'll let you know what I find out.
And now I just removed the background image from the row and the line is gone. I recropped the top edge of the image, resaved it as a jpeg with no matte, added that background to that row and the line is still there. (The line actually looks kind of like a light colored blue on top of the dark blue background.) So, now I think it has something to do with the background image on the first row when the header is disabled. The line also shows up if I enable the header, but add css to display:none; the header.
Sorry, thought I was posting that on the Siteorigin support page as I am now trying to figure it out with them since this seems to be a problem with their plugin. But maybe it will help others who might came across the same problem. I will post what I found out if they help.
No problems :)
Turns out is was the background image trying to repeat after disabling the header within SiteOrigin Page Builder. They think it was a conflict with the theme, The solution was to add background-repeat: no-repeat; to the CSS declaration within the row so the repeat didn't even try to happen. This is even though I had the background image set to Cover. Hope this helps anyone that comes across the same thing.
Thanks for letting us know !
