Hello,
I’m using the SiteOrigin Hero plugin on the Corp theme. I keep getting a margin across the top of the screen, above the Hero image. I can’t seem to figure out what’s causing it, I’ve looked through all my settings and custom CSS, and have searched around on the forums here. I’m also using the plugin for a different landing page on my site with no problem at all, but for some reason I’m getting a margin on this particular page.
Here’s the page with the issue:
Any assistance would be much appreciated!
Hi Andy
Thanks for posting your question. Have you made progress? The gap looks to be gone. Corp offers a masthead bottom margin setting in the Page Settings section on the right when editing a page.
Hi Andrew, thanks for your reply.
The margin is still there on the page. I might be using the wrong terminology in calling it a margin, but there’s a dark grey bar going across the top of the screen, up where the main navigation is. My intent is to have the hero image expand to the entire screen.
I’ve tried changing the setting for masthead bottom margin in page settings, but it didn’t solve the issue.
If you have any other suggestions, please do let me know. Thanks!
Hi Andy
Thanks for your feedback.
The dark grey bar is the website header. You can use the Page Settings to change the Header Overlap setting to Enabled – Light Text.
Page: Page Settings
Hi Andrew
Once again, thank you for your reply and your help.
I actually already had the setting you mentioned enabled (Header Overlap
– Light Text). I just now tried toggling around all the settings in the
Header Overlap part of Page Settings, and the dark grey bar remains no matter what setting it is on.
Thanks for the detailed feedback. If possible, please, send us an export of the page. You can do that from within Page Builder by clicking LayoutsImport/ExportDownload Layout. Upload the JSON file to any online location like WeTranfer and send us the link. We’ll test locally and go from there.
Thanks Andrew. Here's a link for the JSON file you requested:
https://drive.google.com/file/d/1YsEURJY6jvEdK389D3H6tPH5W12seK6I/view?usp=drive_link
Thanks, Andy. The layout, in combination with Page Overlap, looks good on my end. Have you perhaps made progress? All looks normal on your site now.
Hi Andrew, I did manage to get rid of the grey bar at the top by setting top margin to -100 px in Wigit Styles for the Hero wigit. That took care of it and doesn't seem to be causing any problems, but it seems like a bit of a workaround. I'm still not sure what was causing it to begin with. Thanks for your help, though!
Thanks for the effort. I’ve set up a demo here https://demo.siteorigin.com/corp/sandbox/; unfortunately, the issue doesn’t seem to be present in the layout. Is the negative margin present on your home page at the moment?
Hi Andrew, yes I can see there's no margin at the top in the demo you set up. The homepage on my site does not have the negative margin. The hero image displays correctly on there.
Thanks Andy. Can you perhaps remind me the page to check that has the negative margin? I’ll take a look when I get home.
Sure, here's the page with the negative margin, I made it publicly viewable again: https://andylemaire.com/ukulele-lessons/
Thank you!
Thanks, Andy. Is there another row with a Hero above the row intended to be the top row?
No, the Hero is in the top row in Page Builder.
I’m not sure what’s happening. Corp is moving the page up; it’s just that there is a row above your main row with an empty Hero inside it.
Is this page in the Block Editor? If so, is there a SiteOrigin Layout Block above the Layout Block that you’re using? It can be hard to see, you have to click above the block you’re using.
As far as I can tell, there is not. I've tried clicking around and had a close look in the editor, and don't see a block above where the hero is.
Theo only thing above it is the page title. I've attached a screen shot from the editor screen.
Hi Andy
The forum, unfortunately, doesn’t support media attachments. If you’re in the Block Editor there is another SiteOrigin Layout Block above your existing Layout Block.
If you’re in the Block Editor, use the controls to move your Layout Block up:
https://siteorigin.com/wp-content/uploads/2023/07/01.jpg
Then click around below your Layout Block, and you should be able to magically find the other Layout Block on the page.
https://siteorigin.com/wp-content/uploads/2023/07/02.png
You got it! I followed the steps you outlined, and sure enough that's what it was. It's displaying properly now, without the negative margin needed. Thank you very much for the time you spent on this.
Thanks for your kind reply. I’m glad to hear we’ve made progress and we were able to get to the bottom of this challenge.
Please, let us know if any queries or requests arise in the future.
Cheers for now.
Andrew