[Resolved] Adding 2 more logos in header

[ch1800]

Is there a way to add those 2 logos at left side, in addition to the main one at right side (capture attached) without messing the whole header?

Is Top Bar Widget Area an option here or is it better having them inside the header zone?

Thanks.

[David]

Hi there,

You could use the Header Widget to add the two logos – may take a little CSS to adjust the layout. If you want to add the images there and share a link we can take a look.

[ch1800]

I’ve just added those 2 images in Header Widget.
The link is the same as the capture in my initial message, just use the root domain of that link.

I tried to CSS float:left but didn’t seem to work.

Custom CSS has already this that you previously provided some time ago in order to vertically center the navigation and the main logo and maybe we should also push it down to bottom now in on order to make room for those 2 logos?

/* vertical center nav items and logo */
@media (min-width: 769px) {
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    .site-logo {
        margin-left: auto;
    }
}

I’ll also need to make them smaller somehow.

PS: I’m also wondering now whether it would be a good idea to group those 2 logos in a single image?
Or even group them all together with the main logo, and have all 3 together on top of navigation, left or right. But I’m not sure they want them all 3 together.

[David]

This CSS should no longer be required – can you remove it.:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .site-logo {
        margin-left: auto;
    }
}

Then we can remove the bottom margin from the header widgets with this CSS:

.header-widget .widget {
    margin-bottom: 0 !important;
}

I would recommend a single image would be better then 2 different sized images. Also best create an image that is the size you want it displayed.

[ch1800]

Thanks for this, just implemented but:

– the nav menu is now aligned at top and maybe would be better to keep it at center as before
– the 2 images were vertically aligned one after the other and I added float:right; to make them horizontal
– they are aligned at right side but we need them at left
– they need some margins left/right as they stick together when horizontal

I didn’t yet resize them will do once I get the alignment so that I can better check which size is best.

[Tom]

Using your current set up, you could do this:

.header-widget {
    float: left;
}

.header-widget img {
    margin-right: 20px;
}

What I would do is:

1. Create one image out of the two you want side by side using something like Photoshop, then upload it as your site logo.

2. Upload the other image inside the header widget.

That way you wouldn’t need the CSS above.

Let me know 🙂

[ch1800]

Thanks Tom,

I have to see with my clients what they prefer.
I think I’ll group those 2 logos in a single image and use it as it is now with a single logo, at left side or, if they want to have them all in mobile hamburger also to group all 3, including the current logo, as a single logo file.

I’m keeping for the time being the float:left CSS with a single image so that they can check what they prefer.

I consider this to be resolved, with many thanks to all of you, and I’ll get back again if I encounter any other issues with this.

[Tom]

Glad we could help 🙂

[Author]

Posts