Second Logo

Hi Ben. Welcome to the Hueman forum. You could add this css to a child theme style.css file or use a plugin like Simple CSS:

#header {
  background: url("https://marinerescuekingborough.org.au/wp-content/uploads/2015/10/Logo-Side.png") top right / 300px no-repeat;
}

Reference: https://css-tricks.com/almanac/properties/b/background/

Thanks BDBrown,

I gave this ago but the main problem I then had is it then went in the background of the main logo. Is there anyway to do it as a div?

I’m not sure where you’re adding your custom css since I don’t see it on your site. If I add the code above to the default theme style.css file it adds the same logo to the right side of your site header. If you can post an example of what you described above I’ll take a look at it.

Hey @bdbrown,

I’ve added what you suggested but then I have two problems, its not inline with the logo on the right, and it overlays the main logo on the mobile site.

Any Ideas?

Thanks
Ben

In your existing #header background css, change “top right” to “right 30%”. That should get it pretty close to centered vertically. As far as the mobile screens go, give these media queries a try:

/* tablet view */
@media only screen and (max-width: 979px) {
    /* move second logo up because menu now in 2 lines */
    #header {
        background: url("https://marinerescuekingborough.org.au/wp-content/uploads/2015/10/SurfLogo_Long.png") right 25% / 300px no-repeat !important;
    }
}

/* mobile phone view */
@media only screen and (max-width: 719px) {
    /* reduce size of second logo; fix position below main logo */
    #header {
        background: url("https://marinerescuekingborough.org.au/wp-content/uploads/2015/10/SurfLogo_Long.png") center 175px / 200px no-repeat !important;
    }
    /* move main logo up to make room for second logo */
    .site-title {
    	padding-top: 10px !important;
    }
    /* push nav bar down to make room for second logo */
    #nav-header {
    	margin-top: 50px;
    }
}

Legend @bdbrown, Just how I wanted it. Thanks for you assistance!