Issue with "Header Pro" spacing

Big White Duck
1

Hi @tav. I’ve just begun working on a new site for a restaurant and do have the following problem:

When you go here… Willkommen in der Brasserie Voss im Schwarzen Adler in Simmern …and narrow the browser window you see that as soon as the headlines break into two lines there is a big space added underneath the headline:

spacing
spacing696×644 116 KB

I am using your Header Pro stack for the headlines, because I need the “Extra Segment” feature to sometimes place a bit of smaller text behind the main headline. You see an example for this if you click on the tab “Getränke” in the first headline. I only want to mention this because it could be that this has s.th. to do with my problem.

I really don’t know what is causing this spacing issue when the line break for a headline kicks in and how to get rid of this spacing. Any hints for me…? ;-)

2

Its because you have segment 1 turned on but it is empty. The padding and line height is thus applied and takes up the space.

If you want it turned on so that you can inject text sometimes via a CMS then you can just hide it when it is empty

[data-seg="segment1"]:empty{
    display: none!important;
}
3

Thanks so much, Andrew! That works like a charm. :-)

4

Sorry Andrew, but I do have a follow-up question… If you go here… Willkommen in der Brasserie Voss im Schwarzen Adler in Simmern …and scroll down until “Rosé ~ Weissherbst ~ Blanc de noir offen” you see that only here(!) the content of the Segment1 is always(!) shown in a new line instead of behind the word “offen” (as it is in the blog entries above and below). Any idea why?

5

That’s because of the main header text getting pushed onto a separate line. You can fix it by giving any header pros that you need to use like this a custom class no hpro-nowrap and adding the following CSS to your site wide code:

.hpro-nowrap .primary,.hpro-nowrap .segment{
    display: inline!important;
}
6

Thanks again, Andrew. This works just fine! :-) Could it even be that this code makes the first code snippet superfluous? At least in a quick try everything behaved just fine even when I deleted that snippet (but currently left it in nevertheless)…

7

No, it would not always ensure that an empty segment takes up no space. You should leave the other code in place to be sure.

1 Like
8

Thanks Andrew, will do so.