[Resolved] Header content not in center

Home Forums Support [Resolved] Header content not in center

Home Forums Support Header content not in center

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #456137
    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?

    #456171
    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
    #456290
    Leo
    Staff
    Customer Support

    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?

    #456317
    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

    #456406
    Leo
    Staff
    Customer Support

    Unfortunately center vertically is much trickier than horizontally.

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

    #457120
    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?

    #457331
    Leo
    Staff
    Customer Support

    Hmm I’m not sure what mean?

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

    #457850
    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?

    #457977
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #458541
    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.

    #458647
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.