You helped me solve an issue with icon in header some days ago but I can not write in the same topic as the ticket is closed.
I wanted an icon without text. You suggested a space. And that solved it.
But I noticed that the icon is not visible on phone as the space push the icon to the right. Is there a solution for this?
This happens because on mobile the header area has a limited width, so which is why it pushes the icon off-screen.
To fix it, please try adjusting the element placement inside the Header Builder:
* Move the HTML Block to the Header Top Bar or the Header Bottom Bar in the mobile header
* After that, check again on the mobile preview
Since the mobile header has a different layout structure, small spacing changes can affect alignment.
Ok, that is another way to do it. Client wanted to have it all in one row in order to not push down content. But in this case, we will have to go for this solution.
Thanks
Yes, exactly — on mobile the limited width makes it tricky to keep everything in one row without affecting the layout.
Using the Header Top Bar or Bottom Bar for the HTML block is the safest approach to ensure the icon stays visible without pushing other elements down.
.
