Title: Increasing Header Image Size Last modified: August 21, 2016 --- # Increasing Header Image Size * [eDruid](https://wordpress.org/support/users/edruid/) * (@edruid) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/) * Has anyone figured out how to increase the **Header Image** from 220x75px? * Love this theme, I just dont like how the Header is so small. I think 350x 100 or even a but larger would be nicer. * Ive been trying to mess with the developer tools on chrome and I’ve seem to locate the issues under
. It seems the Header is is part of a
called “row” and when I try to make the box larger, the 4 smaller boxes on the bottom move crazy. * Ill keep trying but I could use some back up on this. If anyone else has figured out how to address this please post. Also if anyone has any ideas I can try, It would be very helpful. * This is what I got tonight from working on it. Still cant get it the width I want it but give it a try and see what you can do: ___________________________ * #header_container { padding-bottom: 15px; height: 125px; } * #menu_container { width: 650px; } * #logo img { width: 350px; height: 100px; } _____________________________ [MyWebSite Still under construction, but the purpler box is what im trying to make wider so it almost aligns with the slider image box. * Thanks! Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/increasing-header-image/page/2/?output_format=md) [→](https://wordpress.org/support/topic/increasing-header-image/page/2/?output_format=md) * [wp-21](https://wordpress.org/support/users/wp-21/) * (@wp-21) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873496) * Please post a link to your site as it we have to look at your code in order to suggest a solution. Thanks. * Thread Starter [eDruid](https://wordpress.org/support/users/edruid/) * (@edruid) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873497) * whoops didnt think of that, Thank you. * [wp-21](https://wordpress.org/support/users/wp-21/) * (@wp-21) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873499) * Hi, sorry i didn’t see the link which you already had pasted above. You need to increase the width, you need to do this, * In your foundation.css stylesheet on th line 269 there is a class as below: * ``` .three, .row .three { width: 25%; } ``` * this is why you are not able to increase the size because the parent container is set to 25% width.now to override for only the header portion you need to attach the id `#header_container` before the class,then you would be able to change the width without changing rest of the elements on your site where the above class is being used.So you will do this, * ``` #header_container .three, .row .three { width: 25%; } ``` * and increase the width to whatever you like. * Thanks. * Theme Author [manish_gori](https://wordpress.org/support/users/manish_gori/) * (@manish_gori) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873522) * In Header.php file on line 30 , change three columns to say four or five, to increase width of logo. And simultaneously, one line 45 change nine to eight or seven. Note: Total of both has to be twelve(which is the total width both logo and menu make) * [BJJ KNIGHT](https://wordpress.org/support/users/bjj-knight/) * (@bjj-knight) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873598) * [@manish_gori](https://wordpress.org/support/users/manish_gori/) Hi Manish, forgive my stupidity but I can’t seem to see where to insert on line 45 a value? I’m not too familiar with PHP, if you could give us an example that would be great. * Thanks * [BJJ KNIGHT](https://wordpress.org/support/users/bjj-knight/) * (@bjj-knight) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873599) * Aplogies managed to locate where you were referring to… *
* Thread Starter [eDruid](https://wordpress.org/support/users/edruid/) * (@edruid) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873600) * Thanks for the response everyone! Had some time today to sit down and try this out again. _____________________________________________________ wp-21, Your idea about: * > before the class,then you would be able to change the width without changing > rest of the elements on your site where the above class is being used.So you > will do this, > #header_container .three, .row .three { > width: 25%; } and increase the width > to whatever you like. * It worked but it messed up the position of the 4 blocks at the bottom making them go from their orignal 4×1 too 2×2 grid. ____________________________________________________ * manish_gori, your idea worked perfectly and i was able to find the lines to edit with no trouble. Now that the logo is larger and nothing gets moved around its exactly what I wanted. * Though now I find a new problem that I am not sure what the image size is to fit in the spot. I tried making a vector image both in 220x75px (recommended) and in 400x100px but im guessing because of the width being in % its getting stretched and blurred. I also like to mention I’ve tried JPGS and PNG, both blur. * [My Web Site](http://printsesh.com/) * What is the image size I should be uploading for the header if these are my settings so it wont blur?: * h1 { font-size:2.5em; color: black; } * .flex-caption { background: rgba(0,0,0,1); /* Change the “3” to a higher number to make it darker*/ } * #slider_container p{ text-align: justify; } * #header_container { padding-bottom: 15px; height: 125px; } * #menu_container { width: 650px; } * #logo img { width: 400px; height: 100px; } * **AND ALSO, The change I did to the “header.php” was:** *
*
* _______________________________________________________________ * Thanks so much with your help everyone. I hope this thread is benefiting others as much as it is me. * Thank You * [T89LunarWolf](https://wordpress.org/support/users/t89lunarwolf/) * (@t89lunarwolf) * [12 years, 10 months ago](https://wordpress.org/support/topic/increasing-header-image/#post-3873604) * I’m getting a similar issue. I put in the image and it ends up moving my menu bar. This is my code for the site. * ```