Looking at the attachment.

How to make the logo (in the black box) take 100% or 90% of the header (the box in red) without the header's height to get bigger I want it to stay the same height as the line in yellow.

Know what I mean? Sorry found no better way explaining it other than playing with colors :P

HI Islam,

This is bit difficult, open this file templates/socialize/local/css/themes/orange/template.css

1. find this code and remove the padding code :

.t3-header {
  padding-top: 20px;
  padding-bottom: 20px;
  background: #ff9c38;
}

.logo-control .logo-img-sm {
  display: none;
}
.logo-control .logo-img {
  display: block;
}

.logo-control .logo-img-sm {
  display: none;
height:100%;
}
.logo-control .logo-img {
  display: block;
height:100%;
}

The height increased alright, not the width tho. It looks like it was enlarged from up and down and doesn't look like the original logo. Is there another way?

I want to change the .logo-image a to:

.logo-image a {
background-repeat: no-repeat;
width: 500px;
height: 90px;
}

.t3-header {
  padding-top: 20px;
  padding-bottom: 20px;
  background: #ff9c38;
}

If you want the logo height is same with the header you should remove the padding, that is not a problem.