Increasing Header Image Size

Please post a link to your site as it we have to look at your code in order to suggest a solution.
Thanks.

whoops didnt think of that, Thank you.

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.

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)

@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

Aplogies managed to locate where you were referring to…

<!–top menu–>
<div class=”nine columns” id=”menu_container” >

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

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:

<div class=”four columns”>

<div class=”eight columns” id=”menu_container” >

_______________________________________________________________

Thanks so much with your help everyone. I hope this thread is benefiting others as much as it is me.

Thank You

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.

<div class="four columns">

<div class="eight columns" id="menu_container" >

The site is here

Still a work in progress and I’m still learning. Any ideas?

I’d like to make the same adjustment, but my header.php is locked. I’m sure it’s something obvious to you all, but I can’t access it. Any ideas?

temporary site:
https://behavioralpolicy.org/behavioral-science-policy-2/

Resolved by pulling into Word and making changes to column div classes.

hi, t89LunarWolf
how did you resolve your issue?

I am attempting to use a bigger logo as well. I have edited the header.php with the following changes:

<div class="four columns">
<div class="eight columns" id="menu_container" >

I have also changed the style.css:

#header_container{
	padding-bottom: 25px;
	padding-top: 15px;
	background: #fff;
	height: 125px;

I upload a bigger logo, but it still gets scaled down, and then is blurry as it tries to fill the space. How do I use a bigger logo?

Thanks!

Just letting you guys know that I figured it out.

In the functions file, I had to change the dimensions for the header uploader, to match the dimensions of my logo.

Keep in mind, you also have to edit the #logo img in the CSS.

For the administrator or moderator for this thread, please delete my post or at least my link to my website. I have already fixed my problem and do not need further help.

For other who are still looking for solutions, the key is via the header.php file

<div class="four columns">
<div class="eight columns" id="menu_container" >

Change these and they should allow you to “scale” the size of the logo. However, this was specific to my problem and may not work for you.

I have a related question:
Would it be possible to change the header, so that I can insert a full width logo (or several logos) and below a full width navigation?

That would be great!
Thanks!