-
Dear GeneratePress team,
I’m experiencing an unexpected visual issue when using two separate elements in GeneratePress:
• A Navigation element placed in the Before Header hook (primary menu)
• A Header element containing a GenerateBlocks Navigation block with a logo
When I use only the logo block in the header, everything displays correctly.
However, as soon as I activate the additional navigation element above it (in the Before Header hook), a thin horizontal line appears underneath the hero section. When I disable the menu above, the line disappears immediately.
The logo image has a shaped bottom edge, and the line seems to appear exactly where that shape is cut off. This only happens when both elements are active at the same time.
I’m not sure what causes this or whether this behavior is expected.
Could you help me understand why this happens and how I can resolve it within GeneratePress?
Thank you very much for your assistance.Kind regards,
Arno -
Hi Arno,
I can not see the line on my computer.
Can you try setting the hero section root container gb-element-6c8857cf‘s
margin-bottomto-1px?Let me know if this helps!
-
Hi Ying,
Thanks for your quick reply and suggestion.
I tried setting the hero section root containergb-element6c8857cf tomarginbottom: -1px, but unfortunately the line is still visible on my end.
It does seem to be browser-related: I’m working in Safari, and the line appears there consistently. When I open the same page in Firefox, the line does not appear at all.
So the issue seems specific to Safari’s rendering rather than the layout in general.
Do you have any Safari-specific recommendations or another approach I could try?
Kind regards,
Arno -
I can see the issue in Safari as well.
Select the shape block, and set its
margin-bottomto-1pxinstead.Let me know if this helps!
-
Ying, thank you very much — that solved the issue!
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.