Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

How to place logo image to right of Site Name in header

+2 votes
51 views
asked Dec 6 in Q2A Core by nap
reshown 6 days ago by pupi1985

Hi, I'm setting up a demo site for some friends/colleagues.
I would like to place a logo image to the right of the Site Name text, but when I add an image in the Admin Center -> Layout -> Show a logo image in the page header it sits over the top of the site name, thus I can't see it.

Using the Custom HTML in <head> section of every page option does not produce the result I would like.

Cheers.

1 Answer

+1 vote
answered 6 days ago by pupi1985
selected 6 days ago by nap
 
Best answer

I just checked your site. Some minor CSS tweaks can fix it. Follow these steps:

1. Change the image size from 1100x42 to 700x84.

2. Set some top margin to the qa-logo class so that the title is centered compared to the image (12px in this case works fine).

This is how it looks: https://i.imgur.com/ClzqBKi.png

commented 6 days ago by nap
edited 6 days ago by nap
Thanks! Got it.
  
In Admin -> Layout -> Custom HTML at top of every page, I put the image code:
<img src="https://dogfighting-league.com/images/header_short.jpg" alt="IDFL Q&A" height="84" width="700">

And edited `qa-theme/Snow/qa-styles.css :: .qa-logo` and added `margin-top: 12px;`
commented 6 days ago by pupi1985
I'd rather use the qa-style.css file, as you did. But you could also add a <style> HTML tag in "Custom HTML in <head> section of every page" with the qa-logo CSS class
...