Logo in-line with title and strapline?

  • Resolved ckbruce924

    (@ckbruce924)


    7 years, 1 month ago

    Hi, I’ve been looking for solutions everywhere online, but nothing has quite worked.

    I’m using the Orvis theme (with a child theme for modification, of course). What I’ve been trying to do is move the logo, so that it’s inline with and on the left of the Title and strapline on my pages. Kind of like this o=

    Before adding the logo I noted the title & strapline were 54 px high, so I made the logo 54px high. There just seems to be so much css I’d be piling on top of each other, and something just wasn’t letting it do it.

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, let’s try the following custom CSS. What it does is to hide the existing site logo and add it as a background image to the site title and spaces the text over to the right to make room for it. I’ve used a Media Query to limit this change to screens/windows 390px and wider since things start to collide at screen widths narrower than that. See what you think.

    @media screen and (min-width: 390px) {
.site-logo {
	display: none;
}
.site-title {
	background: url('https://ckbruce.co.uk/wp-content/uploads/2018/01/minilogo-1.png') no-repeat scroll left top / contain;
	padding-left: 50px
}
}
    Thread Starter ckbruce924

    (@ckbruce924)

    Thanks ever so much! It got me like, 95% of the way there, I just didn’t like the extra padding the non-existant logo added. So I removed the logo completely, it won’t appear at all on small phone screens, but to be honest that’s not a huge upset. I also wanted ‘graphic designer’ to be in-line with my name, so I used this code:

    @media screen and (min-width: 390px) {
.site-branding {
	background: url('https://ckbruce.co.uk/wp-content/uploads/2018/01/minilogo-1.png') no-repeat scroll left top / contain;
	padding-left: 82px
}
}
    • This reply was modified 7 years, 1 month ago by ckbruce924. Reason: Forgot to click resolve button
    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    That looks good, and you are welcome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo in-line with title and strapline?’ is closed to new replies.