Invisible H1 tags

I needed to add an H1 tag to a site built with Foundation but didn’t need that particular piece of text to appear on the page. In the end did it by making the font transparent and hiding it under other content so it neither appears or mucks up the design. Was just wondering if anyone has an elegant solution to achieve this ?


Foundation has a class called hide if the stack you are using has a place to add a custom class you could just add that class. If not you could wrap the headline stack with a CSS box stack and put hide in the class field.


The wonderful Header Pro stack from BWD lets you add a custom class and hey presto - worked perfectly.



As info… here’s a simple free container stack that let’s you add custom class. It also has a couple other nice features like max width.

You could just use the Responsive settings built into every stack to hide that stack on all devices.

1 Like

Equally elegant - thanks

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.