how to make the header width more in Foodie Pro

[lfrey21]

I am working on adding my logo to the header - my logo is really wide because my business name is long and I can only have the logo be EXACTLY 400x170.

I'd at least like my header to be 600x170...how can I make this happen. I've tried to adjust the css file but I can't make any of the changes stick. I am not a pro at using the php files at all.

Help would very much be appreciated it!! I want my business logo to stand out! 🙂

THANK YOU!!

http://www.organiquelove.com

[jbergen]

Hi,

I think it would work to use a larger logo (e.g., 600x170). I used my browser's developer tools to swap your logo for a wider version of the logo, and there was no problem. Just for reference, the CSS code that displays your logo is:

.site-header {
    background: url('http://www.organiquelove.com/wp-content/uploads/2014/10/Organique-Love-Logo-3.png') no-repeat scroll 0% 0% transparent !important;
}

So, in theory, swapping that media file with a larger image of your logo should work.

Another issue you'll need to address is how the logo will shrink on small screens. To make sure it fits on the screen, you can write a media query (maybe for max-width 600px) that tells the logo to fill 100% of the screen width. It would look like this:

@media only screen and (max-width: 600px) {
    .site-header {
        background-size: 100%;
    }
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[lfrey21]

THANK YOU so much Jamie!

This def helps and I had to do that before in the original Foodie theme (swap) out my logo for my larger photo in the CSS BUT on my end it is not showing the background URL, so that is why I am confused on how to change it.

I will go look again and see if I can find it! I will report back shortly 🙂

[jbergen]

I was actually trying to find that code in the theme as well, but it's a bit strange because it's actually in an inline stylesheet. Fortunately, I found this tutorial that describes how to change the header size. So hopefully that should solve the problem.

Feel free to let me know once you've resized the logo because I think there still might be issues getting it to look good on smaller devices. But I can probably figure something out once you've got your logo resized.

Jamie

---

Jamie @ Ladebug Studios

[lfrey21]

Yes, I actually found that tutorial as well but I do not know how to change the php...I simply added new CSS to accommodate my new logo size but when I added "center" it went back to the small logo.

Ahhh.....any suggestions??! I added this CSS to the stylesheet to see if the image would change and it did but it is aligned left

.header-image .site-header {
background: url('http://www.organiquelove.com/wp-content/uploads/2014/10/Organique-Love-Logo-41.png') no-repeat scroll 0% 0% transparent !important;
}

When I added no repeat center; it went back to middle and small...

.header-image .site-header {
background: url('http://www.organiquelove.com/wp-content/uploads/2014/10/Organique-Love-Logo-41.png') no-repeat center; scroll 0% 0% transparent !important;
}

[jbergen]

Where did you add your CSS? I can't seem to find it in the child theme's style.css file.

And I would recommend to change your functions.php like the tutorial says. It's really not too bad. You just have to go into the folder for the child theme and open functions.php. Then you'll just find this:

//* Add support for custom header.
add_theme_support( 'genesis-custom-header', array('width' => 400,
'height' => 170
)
);

and replace the 400 with a 600. Let me know if you need help.

Jamie

---

Jamie @ Ladebug Studios

[Jodi P]

Foodie support recommends following the tutorial referenced above and making changes to both your style.css and functions.php files via FTP. Here is a great tutorial that walks you through how to use FTP: https://www.youtube.com/watch?v=xP6VFGAls28.

Once you get your header resized then you may need to follow this tutorial to get your header looking good on mobile devices: http://thepixelista.com/responsive-genesis-child-theme-logo/.

Best,
Jodi

[Author]

Posts