Help in adjusting the header's height to a smaller size

Almost there.
What theme do you use, and how exactly the CSS for it?

HI Arie,

I use twenty eleven right now.
This is what it says so far.
Can you adjust the size to a smaller height?

/* =Header
———————————————– */

#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 10px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
#branding img {
height: 100px
margin-bottom: -7px;
width: 100%;
}

Let me know!

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}

to:`

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 10px 0;
}

that will reduce the height below the site description to 10 pixel.

and

#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}

to

#site-title {
margin-right: 270px;
padding: 10px 0 0;
}

which will reduce the padding above the site title to 10px

Also you need to adjust the top value search form which is affected by the changes.

#branding #searchform {
    position: absolute;
    right: 7.6%;
    text-align: right;
    top: 25px;
}

Hope it helps

Hi Arie,

Sorry but it doesn’t seem to work?
It didn’t do anything actually.

/* =Header
———————————————– */

#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 10px 0;
}

#site-title {
margin-right: 270px;
padding: 10px 0 0;
}

#branding #searchform {
position: absolute;
right: 7.6%;
text-align: right;
top: 25px;
}

Followed your suggestion but it didn’t do anything
Do you have to change the margin of headings or any other changes I need to make?
Let me know

Well I’ve tried that myself and it works fine.
Could you give me a link to your site so I could inspect further?

Sure,
its https://www.tokyoluxe.com

I have check your site and it turns out that the Header Image is hard coded to 1000px width and 500px height. That’s why the CSS adjustment not working.

Maybe this will works. Try:

#branding a img {
   height: 100px;
}

Or maybe you can change the image with another image which has less height. Say it 1000px x 200px. That would be fit right.

Thank you so much Arie, you’re the best.
You were right, it worked.

Now, the search did adjust with the changes.
Do you think you can teach me how to put it in the right spot where all the headings are located?
I’ve tried to adjust it like you suggested previously, but it didn’t work either
Please let me know!

Default for Twenty eleven theme is 1000px by 288px and you have 1000px by 549px you must have uploaded the custom image that size if upload image that smaller then you will have that size as custom header.

Mia,

For the Searchform, here’s what you need to adjust.

Find below code on the style.css

#branding .with-image #searchform {
    top: auto;
    bottom: -27px;
    max-width: 195px;
}

Adjust the top value to fit your site and set the bottom value to 0;
You may as well add right: (some value) to it for better adjustment.

Sorry Arie,
It doesn’t seem to work.
Can you please give me the CSS code with the exact px?

Sorry!!