Hi,

I am trying to setup a blog for my wife's fitness business. I like this design, but I'm used to simply being able to upload a custom header image file. I'm sure there are many great reasons and lots of amazing other things that I have not even begun to scratch the surface on yet, but my wife paid a graphic designer to create her blog header image and we'd like to paste it above the menu bar area.

I apologize if this is sticky'd somewhere, but I'm really trying to get this done for her ASAP.

How to do?

And, I've got it :-)

Edited the header.php file as follows:
1. Added the <img src> following the <a href="<?php echo home_url(); ?>"> entry

<a href="<?php echo home_url(); ?>">
<img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png">
</a>

2. The image appeared all scrunched up so I had to edit the vertical space for the logo-img by increasing the columns available. Default was col2 - I changed it to col8
<div id="logo-img" class="col8">

3. Then I had to change the horizontal space by decreasing the columns available for the menu-wrapper. Default was col6, I reduced to col3
<?php wp_nav_menu( array(
'container' => 'nav',
'container_class' => 'menu-wrapper col3',

Voila!!

Maybe not so fast!

I seem to have increased the white space beneath the menu bar pretty significantly. I know this is RESPONSIVE, but I'm not sure where to reduce that space I responsively increased :-)

Remember all cols for a row have to equal 12

try this: If you want the logo image

1) above the blog title/menu replace the 'banner-br' div in the 'header.php' with

<div id="logo-img" class="col12 row">
	<a href="<?php echo home_url(); ?>">
           	<img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png">
	</a>
</div>

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-area" class="col5">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array( 
			'container' => 'nav', 
			'container_class' => 'menu-wrapper col7', 
			'container_id' => 'menu1-wrapper', 
			'menu_id' => 'menu1', 
			'menu_class' => 'cf menu', 
			'theme_location' => 'menu1', 
			'fallback_cb' => 'bfa_page_menu' 
		) ); ?>
	</div>
</div>

2) if you want it inline with the title and menu use this (adjusting the columns to your needs)

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-img" class="col2">
		  <a href="<?php echo home_url(); ?>">
              <img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png">
          </a>
		</div>
		<div id="logo-area" class="col3">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array( 
			'container' => 'nav', 
			'container_class' => 'menu-wrapper col7', 
			'container_id' => 'menu1-wrapper', 
			'menu_id' => 'menu1', 
			'menu_class' => 'cf menu', 
			'theme_location' => 'menu1', 
			'fallback_cb' => 'bfa_page_menu' 
		) ); ?>
	</div>
</div>

Is it possible to get a picture to sit behind the title, menu and tagline? I've tried placing it in so many different places now.

EDIT: Got it. Added my own class to header.php in the banner div, then entered the image and style in content.css

juggledad, in both of the scenarios that you laid out, what should the two image sizes be (in pixels)?

Instead of me telling you, why don't you go try a bunch of differen sizes and report bach which you feel is the best.

Hey juggledad...

I followed the advice you gave above - the first option with the header image above the menu. I then removed the text logo bit and expanded the menu to 12 cols. All great, but...

The image gets covered by the menu. The only css solution that I can think of would be to set a minimum height of 130px for the img or div or add a large margin on the div holding the menu, but those would hurt the responsiveness of the theme (show the image full 960x130 size). What am I not figuring out?! GAH!

You can see what I'm playing with here.

Any thoughts, pointers, directions, complete fix? I'll take any of the above. I have decent css skills, or would if it was still 2005 Just completely banging my head on this for some reason.

You could put this in one of the virtual css files such as various.css

#logo-img {
    height: 230px;
}

Thanks lmilesw!

It's not quite as elegant as I'd like - leaves a huge gap on mobile devices (or on shrunken browser windows). But it's good enough to let me move on and stop beating my head for now. If/when I figure out a smoother solution, I shall pass it along. If anyone else stumbles on the thread & has one -- feel free to beat me to posting it.

Originally Posted by avala

... leaves a huge gap ...

Your div height is 230px and your image height is 130px. That may explain the gap, which I expect measures 100px.

I suggest you experiment with a test template and colored background divs until you get a layout you like. The code to do that is at the bottom of this post.

go to mto->export import - copy the export settings to a TEXT file and attach them to a response

Originally Posted by avala

Thanks lmilesw!

It's not quite as elegant as I'd like - leaves a huge gap on mobile devices (or on shrunken browser windows). But it's good enough to let me move on and stop beating my head for now. If/when I figure out a smoother solution, I shall pass it along. If anyone else stumbles on the thread & has one -- feel free to beat me to posting it.

My bad... I was trying the brute force attack which won't play nice for responsiveness. The issue can be fixed by changing

#menu1-wrapper to relative instead of absolute in menus_menu1.css.

and remove the

#logo-img {
    height: 230px;
}

That did it! Thanks!

(and I'm a bit embarrassed that I totally missed that line when I was poking around the menu... head banging makes it hard to see things, sometimes)