2 logos in header

Hi Rolf,

I’m not sure exactly what you are looking to achieve, but you can follow this in order to add a widget area to the header of your site: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area. Once you have added the content, then we can help you out with styling.

Best regards,
Rikard

Hi Rolf,

Thanks for the update. Please try this in Quick CSS to position the widget to the right of your default logo:

#media_image-2 {
    position: absolute;
    left: 220px;
    top: -50px;
}

#media_image-2 img {
    max-width: 40%;
}

I see that the image has a lot of white space, so you might want to crop it, then upload it again. You will likely have to adjust the values in the CSS I sent a bit after that as well.

Best regards,
Rikard

Hi,

Thanks for the update. This part of the CSS I sent should control the maximum width of the images/logos:

#media_image-2 img {
    max-width: 40%;
}

If you need more specific CSS, then please try to explain a bit further what you are trying to achieve.

Best regards,
Rikard

Hi,

It might be better if you hide the header widget for mobile, then add this in function.php to inject your images under the header:

function add_after_main_container() {
  ?>
  <div id="mobile-logos">
    <img src="https://nordicanalytics.dk/wp-content/uploads/2021/11/115-180x180.png">
    <img src="https://nordicanalytics.dk/wp-content/uploads/2021/11/b667e25c660d49b8be3cf163c65cfe1e-180x180.png">
  </div>
  <?php
}
add_action('ava_after_main_container', 'add_after_main_container');

Then add this in Quick CSS to hide/show the correct images:

@media only screen and (max-width: 990px) {
#media_image-2 {
  display: none; 
}
}

@media only screen and (min-width: 991px) {
div#mobile-logos {
  display: none;
}
}

Best regards,
Rikard

Hi,

Thank you for the update.

You can add the main logo in the Enfold > Theme Options panel. The code that we provided above should add the other two inside the main header. You can add the link tag to add the links and use the css code that we suggested above to control the size of the images.

Best regards,
Ismael

Hi,

1. Please try this in Quick CSS:

@media only screen and (max-width: 767px) {
#media_image-2 {
  display: none;
}
}

2. The code above will hide the widget with the image on mobile, not your main header.

Best regards,
Rikard