Header alignment

  • Resolved joachimherb

    (@joachimherb)


    3 years, 2 months ago

    Hi there.

    At first a lot of thanks for this great theme!

    I have 2 points, which i cant solve:

    1) Header align left, looks like this (on PC Monitor 1280 x 1024):
    Header align left
    The text of Site Title is in one row. Thats ok.
    The Text of Site Description is in two rows. Why?
    I would like to have the Description in one row and there is enough space under the Site Title to do so. How can i solve this?

    2) Header align center, looks like this (on PC Monitor 1280 x 1024):
    Header align center
    The same as align left (Description is in two rows and not in one row) AND Description is left aligned with Site Title. I would like to have the Description centered under the Title. How can i solve this?

    Best regards
    Joachim

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author htmlpie

    (@htmlpie)

    3 years, 2 months ago

    Hi there,

    Thanks!

    That’s by design actually. You can add this CSS to change that:

    
body.pen_header_alignment_center #pen_header #pen_site_title {
  text-align: center;
}
#pen_header #pen_site_title a .site-description {
  max-width: none !important;
}

    It can be added through Appearance → Customize → Additional CSS.

    Hope it helps!

    Thread Starter joachimherb

    (@joachimherb)

    3 years, 2 months ago

    Thank you very much for your fast answer.

    Yes it helps for 1), this is the result:
    Header align left

    For 2) it helped in the way, that the Description is in one row, but the Description remains left aligned to the Title:
    Header align center
    I would like to have the Header centered and the Description centered under the Title if the chosed Header Alignment is Center. Like the way in Word, when you center a paragraph. All rows of the paragraph are centered, not only the paragraph itself.
    Can you please solve this for me?

    By te way: I dont need it, but if the choosen Alignment for the Header is right, Title and Description are aligned right, but the Description remains left aligned with the Title:
    Header align right
    If you have a Textblock in Word and align it right, all rows of the textblock are aligned right. In my opinion a Header should align the same way as a textblock in word. Just my thoughts 🙂

    Once more, thank you very much 🙂
    Joachim

    Theme Author htmlpie

    (@htmlpie)

    3 years, 2 months ago

    I think it makes sense, at least while there is no logo. It’ll be probably changed that way in the next update. Thanks for your suggestion.

    In the meantime, try this CSS:

    body.pen_header_alignment_center #pen_header #pen_site_title {
  text-align: center;
}
#pen_header #pen_site_title a .site-description {
  display: block;
  float: none !important;
  max-width: none !important;
}
    Thread Starter joachimherb

    (@joachimherb)

    3 years, 2 months ago

    Thank you very much.
    This works fine.

    I just saw, that if the Search box is disabled or a seperate Search bar and changing Header alignment from Left to Center, then the Header Section expands its height and the Header Title and Description are no longer centered in Height in the Header section. There is more space above than below.
    Can you please make, that it is centered in height and the Height of the Header section does not expand?
    (It is the same behavior without the additional CSS)

    I know, this are only little optical things, but i think such a great Theme should be really “perfect” 🙂

    • This reply was modified 3 years, 2 months ago by joachimherb. Reason: Appended text in brackets
    Thread Starter joachimherb

    (@joachimherb)

    3 years, 2 months ago

    In the first sentence of my last post there are missing two words:

    I just saw, that if the Search box is disabled or a seperate Search bar is selected and changing Header alignment from Left to Center, then …

    Theme Author htmlpie

    (@htmlpie)

    3 years, 2 months ago

    You’re welcome.

    I’ll check that too, thanks.

    In the meantime, you can prevent that with this CSS:

    @media only screen and (min-width: 728px) {
  body.pen_header_alignment_center #pen_header #pen_site_title {
    margin-top: 0 !important;
  }
}
    Theme Author htmlpie

    (@htmlpie)

    3 years, 2 months ago

    PS: Please consider rating the theme, the plugin, and contributing in translation. Thanks.

    Thread Starter joachimherb

    (@joachimherb)

    3 years, 2 months ago

    Thanks for your help!
    I rated the theme and the plugin.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header alignment’ is closed to new replies.