Foundation Header Add Small Segment

Hi Experts out there!

I´m facing a problem with the “Small Segment” feature in Foundation Headers.

In some cases the Header plus the “small segment” exceeds the length of the line, so a second line is used. Unfortunately the spacing between these lines does not behave as expected:


I guess I could fix this with a simple CSS statement, but don’t know the correct syntax in detail.

Help would be much appreciated

Interesting one. It’s been almost 6 years and I’ve never seen someone find this one. Do you have a url that this is on? I’m not in the office, I can try to replicate it later.

Thanks for picking this up

here´s an url:

All pages with subtitles inside show the same behaviour

btw: the two
statements are my input in the textfield to create a linebreak between header and subheader - it would be cool to have a checkbox for this in the properties. And I would prefer to stick to the header color also for the subheader. Another cool feature would be an option to use the “site slogan” similar to “use site title”

Now that I have seen what you are doing, that is not really what the small feature was intended to do. For what you want, you should have 2 header stacks styled the way that you want.


meanwhile I investigated the foundation.css and found that. For what reason is the line-hight set to 0? Removing that line solved my issue. Now unfortunately that might become overwritten with a future update so I´m not comfortable with that workaround.

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: #6f6f6f;
font-size: 60%;

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