A header layout with AJAX login and register forms (buttons) a part of Header AJAX login/register gist (1)

header_layout.php

<header id="main_header" class="clearfix">
	<div class="top_bar">
		<div class="container">
			<div class="ajax_login">
				<form id="login" action="login" method="post">
			        <h1><?php esc_attr_e('User login','yourtheme') ?></h1>
			        <p class="status"></p>
			        <input id="username" type="text" name="username" placeholder="<?php esc_attr_e('Username','yourtheme') ?>">
			        <input id="password" type="password" name="password" placeholder="<?php esc_attr_e('Password','yourtheme') ?>">
				    <div class="forgotten_box">
				        <a class="lost" href="<?php echo esc_url(wp_lostpassword_url()); ?>"><?php esc_attr_e('Lost your password?','yourtheme') ?></a>
				    </div>
			        <input class="submit_button" type="submit" value="Login" name="submit">
			        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
			    </form>
				<div class="ajax_login_overlay"></div>
			    <?php if (is_user_logged_in()):?>
			    	<a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>"><?php esc_attr_e('Logout','yourtheme') ?></a>
			    <?php else: ?>
			    	<a class="login_button" id="show_login" href=""><?php esc_attr_e('Login','yourtheme') ?></a>
			    <?php endif; ?>
			</div>
			<?php if (!is_user_logged_in()):?>
			<div class="register">
				<a class="lost" href="<?php echo esc_url(wp_registration_url()); ?>" id="show_register"><?php esc_attr_e('Register','yourtheme') ?></a>
				<form method="post" name="st-register-form" id="register_form">
					<h2 class="register-heading"><?php esc_html_e( 'Register', 'yourtheme' ); ?></h2>
					<div id="registration-error-message">
					</div>
					<div class="field">
						<input type="text" autocomplete="off" name="username" id="yourtheme_register-username" placeholder="<?php esc_html_e( 'Username', 'yourtheme' ); ?>" />
					</div>
					<div class="field">
						<input type="text" autocomplete="off" name="mail" id="yourtheme_register-email" placeholder="<?php esc_html_e( 'Email', 'yourtheme' ); ?>" />
					</div>
					<div class="field">
						<input type="text" autocomplete="off" name="fname" id="yourtheme_register-fname" placeholder="<?php esc_html_e( 'First Name', 'yourtheme' ); ?>" />
					</div>
					<div class="field">
						<input type="text" autocomplete="off" name="lname" id="yourtheme_register-lname" placeholder="<?php esc_html_e( 'Last Name', 'yourtheme' ); ?>" />
					</div>
					<div class="frm-button">
						<input type="button" id="register-me" value="Register" />
					</div>
				</form>
			</div>
			<?php endif; ?>
		</div>
	</div>
</header>