How to align header text with header image?

  • Resolved Kaplaink

    (@kaplaink)


    11 years, 1 month ago

    I am having my header image in the left hand side of the header – but wish to add contact details in the right hand side.

    But when I insert my contact text it is being positioned on either the lines above or below the left hand side image and not on the same line i.e. making the header taller!

    Can anyone guide how to insert the text so it appears aligned without making the header taller?

    I don’t know better so I tried inserting the text both before and after below boldded logo

    <header class="header-wrap">
	<?php if (has_nav_menu('header_nav')) { ?>
	<nav class="header-nav clearfix">
		<?php wp_nav_menu(array('theme_location' => 'header_nav', 'fallback_cb' => '')); ?>
	</nav>
	<?php } ?>
	<strong><?php mh_logo(); ?></strong>
	<nav class="main-nav clearfix">
		<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
	</nav>

Viewing 1 replies (of 1 total)

  • It seems to me you need to resolve this with CSS. You could for example float the elements inside the header-wrap to the left and make sure the added width of both doesn’t surpass the width of the parent.

    .header-wrap{
float: left;
width: 100%;
}
.header-nav{
float: left;
width: 50%;
}
.contact-text{
float: left;
width: 50%;
}
Viewing 1 replies (of 1 total)
  • The topic ‘How to align header text with header image?’ is closed to new replies.