[Resolved] Header content not in center

[Thomas]

Edit: you can forget about this first post and go on to the second post.

Hi there,

I’m currently in the process of making a new website for our outdated forum, and so far are very happy with using GeneratePress. However, now I’m running into my first little problem.

I’m using the GP header add-on to create a beautiful header with hero image, I’m also using the mobile header function.

On every page I want to show a button for non-logged in users / logged in users. Followed by a different text depending on the page that they visit. I want it to show on both desktop and mobile browsers.
Because PHP is needed I wrote my own shortcode which I inject into the header content.
It works just the way I want it, however, it’s placed on the top left corner instead of the center, and I can’t get it to center.

The code I use:

function header_content_function() {
	if ( is_user_logged_in() ) {
		echo '<a class="button" href="#">Logged in button</a><br /><br />';
	} else {
		echo '<a class="button" href="#">Not logged in button</a><br /><br />'; 
	} 
	echo '<div style="color: #efefef;"><h3>';
	if ( is_home() ) {
		echo 'Tuning | Forum | Community';
	} elseif ( is_archive( 'forums' )) {
		echo 'Forums';
	} else {
		echo get_the_title();
	}
	echo '</h3></div>';
}
add_shortcode( 'header_content', 'header_content_function' );

I Want it to center horizontally and vertically and be responsive, just the way it would when I write some random text into the GP header content area.

What I’ve already tried:

• Text alignment is set to center.
• Setting content to full screen and vertical align center. This only stretches out my button to the width of the screen. It doesn’t do anything for the alignment.
• Using <div align="center"> This centers my content horizontally, but only on desktop and not on mobile browser.
• Using css didn’t do anything at all and I don’t like using this because the padding is set in pixels.

  .header_center {
      padding: 200px 0;
      text-align: center;
  }

Can you please help me to resolve this and make my content align probably?

[Thomas]

OK, forget the first post, I changed the concept.

Now I only want to show the button on the front-page.
So I made a seperate GP header for the front-page, but still want it to show up on both desktop and mobile browsers.
So again I made my own shortcode to achive this.

function header_content_function() {
	echo '<div style="color: #efefef; text-align: center;">';
	echo '<h1>Vespa-Ciao.nl</h1><h3>Tuning | Forum | Community</h3>';
	if ( is_user_logged_in() ) {
		echo '<a class="button" href="#">Logged in button</a>';
	} else {
		echo '<a class="button" href="#">Logged out button</a>';
	}
	echo '</div>';
}
add_shortcode( 'header_frontpage', 'header_content_function' );

I don’t know why my horizontal alignment didn’t work earlier, probably a typo. I now got it to align in the center horizontally. But i still can’t get the vertical alignment to work.

How do I align this vertically?

I tried:

• The fullscreen & vertical center content
• Div & CSS vertical-align: middle

[Leo]

Hi there,

In this div you’ve added: <div style="color: #efefef; text-align: center;"><h1>Vespa-Ciao.nl</h1><h3>Tuning | Forum | Community</h3><a class="button" href="#">Logged out button</a></div>

Can you try giving it a class and try add some top padding?

[Thomas]

Hi there Leo,

I added padding-top element (in %) in the custom css. Because the header height is different per screen size.
The padding-top is a work around and works kind-off – but it’s never in the middle.

Is there an official way to center it vertically? No matter the screensize your using? I’m not happy with a padding-top as a solution.

Kind regards,
Thomas

[Leo]

Unfortunately center vertically is much trickier than horizontally.

Maybe check out the solutions of this site? https://css-tricks.com/centering-css-complete-guide/

[Thomas]

Merry x-mas!

Got it to align in the center/middle by making it behave like a table cell and distracting the menu height. Your link was very useful, thanks! The alignment issue is resolved.

Still, I wonder about one thing for the future.
When using i.e. `text
text
[shortcode]`
My shortcode showed above the text, how come, and is there a way around this?

[Leo]

Hmm I’m not sure what mean?

Currently in page header content I see texts above the login button.

[Thomas]

On the front page I echo the text in the shortcode-script so it’s no problem.

But let’s say I want to make a button-shortcode in the future and use it on a lot of location.
It would be nice if I don’t have to make a new shortcode for every location.

To show you what happens I made an example, when you visit my site go to /example-page
Shortcode used:

add_shortcode( 'example_button', function() {
	if ( is_user_logged_in() ) {
		echo '<a class="button" href="#">Logged in</a>';
	} else {
		echo '<a class="button" href="#">Logged out</a>';
	}
});

Content, entered in Page Headers:

<h1>test text</h1>
<h3>test text</h3>
[example_button]

As you can see the button shows above the text, but the shortcode is placed beneath the text.
How can I stop this from hapening?

[Tom]

Since you’re using echo in your shortcode, you need to use output buffering: https://codex.wordpress.org/Shortcode_API#Output

Let me know if you need more info 🙂

[Thomas]

Well that was quite easy, lol.
Just replaced echo with return and it was fixed.

Thank you! I’ll mark this topic as resolved.

[Tom]

You’re welcome 🙂

[Author]

Posts