Headline Alignment with Subheadline

[jonathanrockett]

Hy Guys,

Having a weird issue: I’m editing the Hero bar of a header in Pro: https://skytechdev.sizzlingdigital.com/

The top headline needs to align left and have no subheadline, but when I toggle to disable the subheadline it centers, despite my setting all controls for bar, container, text, etc. to align left…

Any thoughts? I’ve included login info if you want to play with it…

Thanks so much,

Jonathan

[marc_a]

Hi Jonathan,

Thanks for reaching out.

To better help you with your concern, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[ruenel]

Hey Jonathan,

Thank you for the details. I have checked your header and regarding with your headline. Actually, this is not an issue. Keep in mind that in your container, you have set the Flexbox alignment to the center:

Now, as soon as you enable the subheadline, the headline moves to the left because the subheadline is too long. If you really want to center the main headline, kindly use the Text Alignment option in the Headline Settings.

And the subheadline has its own text formatting option too!

Hope this helps.

[jonathanrockett]

Hi @ruenel - You are correct.

I realize what happened (container set to horizontal align center), but that brings up a second question:

I set the container to align center because I want the icon to align center (see image):

But in order to get my headlines to align left by setting the container to align left, my icon naturally aligns left:

How can I align the icon (down arrow) center? I assume with some CSS?

Thanks again,

-Jonathan

[nabeel]

Hi Jonathan,

I went ahead and set the horizontal align setting of the container to start and then only added the following code in the Element CSS of the Icon element:

$el {
  width: 100%;
}

This has centered align the icon, the reason is by default the Icon element is centered in the theme’s default styling, only width needs to be defined to make it centered in a container.

Hope this helps!

[jonathanrockett]

Awesome @nabeel! You guys rock

[ruenel]

You’re welcome Jonathan!
We’re glad we were able to help you out.