Adding additional elements in header

I forgot to mention the URL:

I am already quite far but here some specific questions:
1: How can i reduce the distance between the upper browserwindow edge and the logo?
2: How can i make the logo bigger? (if i use the “custom pixel value setting” for the header it influences the whole header but i just want to make the logo takes more space)
3: Something is wrong with the CSS cause it does not adapt properly if i minimize the browser window.

Thanx Martin

Hallo Ismael
i added your CSS but had to change the value from 156px to 150px – otherwise the logo was chopped of a bit on the bottom.

This shows how the additional elements should be positioned in mobile devices.
Just right beside the logo
https://drive.google.com/open?id=0BzF3a9LXV99JOWxtdTFhS3dsVlE

The settings we have is:
Stretched layout by 1310px
Logo left / Menu below
Breadcrumb & Title = NO
Header-Size= Big
No Extra-Elements

This is what we already have in our CSS regarding the header

#header #header_main_alternate .container {
  padding: 0px !important;
}

#header_main_alternate{
	display:block !important;
} 

The last one is to solve the “residiual styling” problem for Ubermenu from SevenSparks

Then we have this but it should only affect the <divs> we have added already.
I am not sure if its correct.

.addheader {
  float: right;
  width: 45%;
  color: #222 !important;
  text-transform:uppercase;
}
.addheader a {
color:#ccc !important;
text-transform:uppercase;
font-size: 100%;
}
.addheader1 {
  background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/schloss.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;
}
.addheader2{   background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/anfrage.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;}
.addheader3{   background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/rueckruf.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;}
  .widget.clearfix.widget_text {
  position: relative;
  top: 117px;
  right: 65px;
}

Kind Regards martin

Hi Ismael
credentials attached
Regards Martin

Hi Ismael
GREAT & THANK YOU VERY MUCH.

There is no issue with the Ubermenu – it was just for your information that there is some CSS regarding the header.

But i have one (probably) minor thing i fiddle around for a while now.
Can you please help me to understand where i have to look for the solution?

The problem:
The text “Kontakt” & “Anfrage stellen” should be a bit closer at the icons.
This value for addheader2 & addheader3 would be perfect for desktop:
padding:0 55px 0 0
If i do that and than resize the screen the text is to close and overlaps the icon short before the breakpoint.
I tried it with a relative value ” padding: 0 3% 0 0″ but that didnt help neither.
Then i tried it with variations of margin and / text-intent but i cant solve it.
Could you please point me at least in the right direction to find the solution?
(Sometimes its just small things that can drive you crazy – doesnt it?)

Kind regards Martin

Hi Ismael
sorry – but that doesnt work.
Maybe i wasnt clear when i described the problem.
Can you please watch the screencast?
https://drive.google.com/open?id=0BzF3a9LXV99JNFBqYnhMNjhzS2M

It shows what happens if i resize the window.
Thats what we need to solve and what i cant figure out how to fix.

Regards Martin

Hi Ismael
thanx again.

Can you please leave that thread open??
I guess that i will have twor or three minor things but first i have to adjust some other elements before i can go further with the header.

Kind regards martin

Hello Vinay
faster back than you thought, right? ;-)
We have some real trouble with getting the positions & behavior (for mobile and different viewportsizes) we need and before we start to adjust i thought it might better to ask some PROs – you.
At first we would like to make sure that we dont have any unnecessary or interfering CSS.
Can we please start with this?

Ismael gave us this CSS:

 .logo img {
      width: 340px;
      height: 150px !important;
      max-height: 150px !important;
      top: -20px;
   }

Would it be better to have it like that: width: auto; ?

.logo img {
  height: 150px !important;
  max-height: 150px !important;
  top: -20px;
width: auto;
}

Two:

.addheader {
  float: right;
  width: 100%;
  color: #222 !important;
  text-transform:uppercase;
}

Is that float:right really necessary??
If i remove it it doesnt change anything

Kind regards Martin

Hi Ismael,
yes, ok, but can we use width: auto; or does it create problems?

Kind regards
Martin.

Hi Ismael
please leave that thread open since there are still some questions.
But i need some time to collect them and fix some other stuff before.
Thanx and have a nice day.
Kind regards Martin