Problems placing Menu and Header Image

  • Resolved abreusky

    (@abreusky)


    8 years, 2 months ago

    Hi everyone!

    I have a little problem with my layout…

    When I place an header image, it comes bellow the main menu.

    I would like to place the menu and search field underneath the header image.

    I tried to “change positions” of both items on the header.php file, but it didn’t work. I tried several different configurations but everytime I changed the positions, there was a different problem, image or menu was placed on an unexpected place.

    As I don’t know almost anything about CSS or PHP, I am finding a lot of diffifulty doing this.

    This is my blog: https://exquisite.style

    This is how things look on the original theme (without header image): https://blogum.wpshower.com/

    And this is my header.php as it is configured now:

    The header image is correctly located, and there are two menus, one correctly aligned but on top of the header image, and the menu & search field which are bellow header image are not alligned to their original place.

    <body <?php body_class(); ?>>
<div class="wrapper">
<?php do_action( 'before' ); ?>
	<header id="header" role="banner">
		<hgroup>
			<h4 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h4>
			<?php if ( '' != get_bloginfo( 'description' ) ) : ?>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			<?php endif; ?>
		</hgroup>

		<div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</h3><!-- end #menu -->

			<?php get_search_form(); ?>
		</div>
	</header>
	<?php
		// Do we have a header image around?
		if ( '' != get_header_image() ) :
	?>
	<div id="header-image">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>
	</div>
	<?php endif; ?>
		<div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</h3><!-- end #menu -->

			<?php get_search_form(); ?>
		</div>
	<div class="middle clear">

    Whereas this is the original header.php file:

    body <?php body_class(); ?>>
<div class="wrapper">
<?php do_action( 'before' ); ?>
	<header id="header" role="banner">
		<hgroup>
			<h4 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h4>
			<?php if ( '' != get_bloginfo( 'description' ) ) : ?>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			<?php endif; ?>
		</hgroup>

		<div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</h3><!-- end #menu -->

			<?php get_search_form(); ?>
		</div>
	</header>
	<?php
		// Do we have a header image around?
		if ( '' != get_header_image() ) :
	?>
	<div id="header-image">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>
	</div>
	<?php endif; ?>
	<div class="middle clear">

    As you see, I am doing a lot of messy things… ??

    If anyone can help me with this, I thank you so so much! It’s such a small thing but it means a lot to me.

    Thank you guys!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi @abreusky,

    I can help you out. Just to confirm, you want menu and search option below the header image, correct?

    Thread Starter abreusky

    (@abreusky)

    Hello @a2hostinglk,

    thank you for your reply!

    Yes, I would like the menu and search option below header image, but aligned to the original position, as you can see in https://blogum.wpshower.com/

    I didn’t figure out how to do it :-/

    I look at the code of the original theme. I would like to point out 2 things here:

    1) The theme is not using any header image. The top verbiage that you see on the header “— Blogum” is actually a text (not header image). So, in their demo they are not using any header image.

    2) While in your case, you are not using any site name / header text. Instead, you have uploaded the header image which is supposed to be displayed below menu bar & search bar by design.

    So, you are not doing anything wrong. Everything is working as per the design in your theme.

    Thread Starter abreusky

    (@abreusky)

    Oh, yes, it’s true, I’m not using the title as a header, as in “— Blogum”.

    But, you can see that in https://exquisite.style I managed to place the menu below header image, but it is not aligned as the menu on top of header image.

    Do you think it is possible to change this small detail? If yes, is this a CSS or a PHP issue?

    I actually used a lot of Firefox’s Firebug to help me change this, along with SiteOrigin plugin for WordPress, which offers custom CSS. Somehow Siteorigin was not being able to handle this. I also changed these details on the original header.php file.

    Also, do you have any tip about a good CSS customiser plugin for WordPress? O_o

    Yes, I can see that you managed to add menu and search bar below the image which is great (i see double menu but i am sure you are aware of that).

    Firefox firebug is a great tool and you are on the right track in terms of how to play around with html markup and css.

    Coming back to your question, how to move your menu bar (which is below header image) in the same position as the menu bar at the top.

    I see you have added this below your image:

    <div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<div class="menu-header-container"><ul id="menu-header-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42"><a href="https://www.exquisite.style">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="https://exquisite.style/contact/">Contact</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-68"><a href="https://exquisite.style//index.php?random=1">Random</a></li>
</ul></div>			</h3><!-- end #menu -->

			<div class="search-form-holder">
	<form method="get" id="searchform" action="https://exquisite.style/">
		<fieldset>
			<input name="s" type="text" onfocus="if ( this.value=='Search' ) this.value='';" onblur="if ( this.value=='' ) this.value='Search';" value="Search">
			<button type="submit"></button>
		</fieldset>
	</form>
  </div><!-- .search-form-holder -->		</div>

    To change the position, wrap it with a DIV with id = header like this:

    <div id="header">
<div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<div class="menu-header-container"><ul id="menu-header-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42"><a href="https://www.exquisite.style">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="https://exquisite.style/contact/">Contact</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-68"><a href="https://exquisite.style//index.php?random=1">Random</a></li>
</ul></div>			</h3><!-- end #menu -->

			<div class="search-form-holder">
	<form method="get" id="searchform" action="https://exquisite.style/">
		<fieldset>
			<input name="s" type="text" onfocus="if ( this.value=='Search' ) this.value='';" onblur="if ( this.value=='' ) this.value='Search';" value="Search">
			<button type="submit"></button>
		</fieldset>
	</form>
  </div><!-- .search-form-holder -->		</div></div>

    Let me know if this fixes your problem ??

    Also – You don’t need any css customizer plugin. What you are doing is correct – inspect the html and css in your browser and see what works for you (then update the style / layout of your site accordingly).

    Thread Starter abreusky

    (@abreusky)

    Hey @a2hostinglk,

    I did what you said and it worked properly for the menu! But I think I might have misplaced the <div> tags around the search field.

    You can check how it looks like at the moment: https://exquisite.style

    It has this header.php:

    </header>
	<?php
		// Do we have a header image around?
		if ( '' != get_header_image() ) :
	?>
	<div id="header-image">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>
	</div>
	<?php endif; ?>
	<div id="header">
		<div class="clear">
			<h3 id="access" class="clear" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</h3><!-- end #menu --></div>
	<?php get_search_form(); ?>
		</div>
	<div class="middle clear">

    I counted the <div> tags and there are a number of 4 (an even number), so I didn’t know if I should add any other or other <div>s.

    But it did help! I think we’re almost there! ??

    Yes, there is a menu on the top, but I will remove it later, I think it is easier.

    Thread Starter abreusky

    (@abreusky)

    HEY!!!

    Hold on, I replaced one <div> tag and now everything it’s in the right place!!!

    THANK YOU SO SO MUCH!!!

    I’m really happy now!!! ??

    I will just remove the top menu and fix paddings and it will be great!! ??

    Thank you guy, I’m so glad with it now! ??

    @abreusky – I am glad I was able to help and everything is working fine on your website ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Problems placing Menu and Header Image’ is closed to new replies.

Tags