Archived topic

Header content not in center

10 replies · Started by Thomas on December 24, 2017

Viewing posts 1–11 of 11

December 24, 2017 at 3:24 am #456137

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?

December 24, 2017 at 5:55 am #456171

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

December 24, 2017 at 9:18 am #456290

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?

December 24, 2017 at 10:04 am #456317

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

December 24, 2017 at 4:16 pm #456406

Unfortunately center vertically is much trickier than horizontally.

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

December 26, 2017 at 6:20 am #457120

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?

December 26, 2017 at 11:37 am #457331

Hmm I'm not sure what mean?

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

December 27, 2017 at 6:53 am #457850

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?

December 27, 2017 at 10:54 am #457977

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 :)

December 28, 2017 at 7:36 am #458541

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

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

December 28, 2017 at 10:06 am #458647

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.