Jump to content

Cannot figure out how to remove a top bar

Go to solution Solved by BartelsCreativeCo,

Recommended Posts

Hi y'all - 

I have been wracking my brain on this little annoying issue. I have 'inherited' a Squarespace site that was already built using a lot of CSS customization. I am not willing to strip most of the CSS out because I wasn't hired to go that deep, but there is one little annoying thing I cannot seem to figure out - how do I get rid of the white bar at the very top? I was able to change the bar from grey to transparent but I cannot make the hero image full screen. I cannot see anywhere in the CSS where that might  be controlled. Any help would be great! Attached is the CSS log. 

Jill Farrell 

minnow-broccoli CSS_Page_1.png

minnow-broccoli CSS_Page_2.png

minnow-broccoli CSS_Page_3.png

minnow-broccoli CSS_Page_4.png

minnow-broccoli CSS_Page_5.png

minnow-broccoli CSS_Page_6.png

minnow-broccoli CSS_Page_7.png

Link to comment
1 hour ago, FarrellStrategicGroup said:

Oops, sorry about that...


password: T67$v126!

No problem!

So after inspecting this in the browser, it looks like you have that space at the top because the number "5" has been added to the html. When I delete that from the chrome inspection tool the gap at the top disappears.

The issue I'm having is finding exactly what the "5" is assigned too. When I inspect the page it isn't tied to one specific id or class—rather it's just in the "body".

This doesn't necessarily solve the problem, but you can hide this by adjusting the top margin. It'll just move it up so that it is no longer viewable. You can use this while you look for the solution to remove the unwanted "5". 

#collection-628fe0495bd5536790a9266c body {
margin-top: -20px !important;

Given the amount of code injection on this site, I'd bet that the "5" was added to the html via a Header code injection and not through CSS. It appears the issue is only on the Homepage, so check the various sections code injections to see if you can find the culprit. Likewise, check the sitewide Code Injection portal to see if there is anything that may be injecting the "5" into the HTML.



Hope this is helpful! Let me know what you find out.

Link to comment
  • Solution
4 hours ago, FarrellStrategicGroup said:

Thank you so much! I tried to put that CSS code snippet you shared but it doesn't seem to work to remove that white bar. But yes, you are right, there is definitely a script in the code injection! If i do anything to that the whole site messes up, so that '5' must be somewhere in there? 



Maybe that's having something to do with it, but since the issue doesn't appear to be affecting every page, I think there has to be some code in effect on only the home page. Was there anything on the home page specifically, when you open up the settings gear icon and go to advanced?


Idk if it'd be a script adding that. Feels like it's HTML somewhere because it's placing the "5" between the body tags.

I don't know of a way to target that "5" is CSS because of the way it's nested between divs. To my knowledge, there is no specific class or id that relates to that text.

Are you also noticing a messed up right margin when you scale the page size down? In my browser when I scale the page down, it increases the margin—you may have to side scroll to the right to see it.

Sorry I can't be of more help right now. I'm puzzled as to how that got added.


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.