🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Adding 2 more logos in header

Home Forums Support Adding 2 more logos in header

  • This topic has 7 replies, 3 voices, and was last updated 5 months ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1150177
    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.

    #1150595
    David
    Staff
    Customer Support

    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.

    #1151791
    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.

    #1151948
    David
    Staff
    Customer Support

    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.

    #1151971
    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.

    #1152416
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1152460
    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.

    #1153129
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.