second Logo in header

HI Yigit,
that’s exactly what I did by now and linked in my request above :(
probably the css customization needs some improvement:

#header .widget {
  left: 98%;
  padding-top: 0;
  position: absolute;
  top: 0px;
  transform: translate(-50%);
  z-index: 999;
}

• This reply was modified 8 years, 8 months ago by niguli.

Hi Richard, thank you. Can you help me more?
here is the situation: http://www.ferrandomotor.it/servizi/
I need the logo to not override any menu voices and, if possible, to be at the top right of the header

Hi Ismael, I added your code.

My idea is to have something similar to this:

or the second logo can be placed at the very right-top after the MAIL icon

• This reply was modified 8 years, 8 months ago by niguli.

almost perfect Ismael, thank you.

Here is my last problem:

– secondary logo is partially hidden when screen size is less than 1500px (circa):

– logo is ok when screen size is > 1500px:

thank you

Hi Yigit,
the media query does not work for me.
Take a look:
http://www.ferrandomotor.it/nuova-home/

I’m not sure It all works… can you take a look?

my quick css is:

/*  FERRANDO MOTOR QUICK CSS */
@media only screen and (max-width: 1500px) {
#header_meta .container:before { right: 0; }}

@media only screen and (max-width: 1500px) {
.responsive #header_main .container {
    max-width: 80%;
}
}

.phone-info span {
font-size: 14px;
}

input#s {
color:#fff !important;

}

#header_meta .container:before {
    content: url('http://www.ferrandomotor.it/wp-content/uploads/2016/04/logo-ktm-1.png');
    position: absolute;
    right: -100px;
}

/*
@media only screen and (max-width: 1300px) {
#header .widget {
   display: none;
}
}
*/
/*
#header .widget {
  left: 98%;
min-width: 200px;
  padding-top: 0;
  position: absolute;
  top: 0px;
  transform: translate(-50%);
  z-index: 999;
}
*/

label.input_checkbox_label {
font-size: 70% !important;
}
input#avia_1_1.text_input.is_empty, textarea#avia_7_1.text_area, select#avia_6_1.select, input#avia_2_1.text_input.is_email, input#avia_3_1.text_input.is_empty, input#avia_4_1.text_input.is_empty, textarea#avia_5_1.text_area.is_empty, input#avia_3_1.text_input.is_phone, input#avia_4_1.avia_datepicker.text_input.hasDatepicker, select#avia_5_1.select {

font-family: 'trade-gothic-20cn' !important;
}

#s {
color:#000 !important;
font-family: 'trade-gothic-20cn' !important;
}
input.button {
font-family: 'trade-gothic-20cn' !important;
}
/*div.container_wrap.container_wrap_logo {
    display: none;
} */

.page-id-9 #header_meta { display: none; }
input#s {color:#000;}
span.copyright {
width: 100%;
  font-size: 14px;
text-align: center;
}

and theme options is:

• This reply was modified 8 years, 8 months ago by niguli.

It does not work Andy, otherwise I did not tried to help you posting quick css.

Even on screen > than iPad the secondary logo is partially cut.

thank you

one question before Andy, please: should I erase all the code below in quick css before adding yours:

@media only screen and (max-width: 1500px) {
#header_meta .container:before { right: 0; }}

@media only screen and (max-width: 1500px) {
.responsive #header_main .container {
    max-width: 80%;
}
}