Centering title image in Panel theme

  • Unknown's avatar
    sailorxan · Member ·

    Hi, I’m an absolute beginner with CSS. I’m using the Panel theme, and I’m attempting to replace the site’s title text with a centered image.

    I’ve looked around for examples of this, but what I’ve found only seems to work at certain quite small resolutions: with a bigger window, or on mobile, the image jumps back to the left, and the title text (which should be hidden) becomes semi-visible.

    Here is the code I’m currently using: 

    .site-title a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url('https://comicsbyxan.files.wordpress.com/2017/10/comics-by-xan-logo-cropped-2.png?w=385') center no-repeat;
	background-size: 100%;
	display: block;
	margin: 0 auto;
	width: 385px;
	height: 250px;
}

    The site I need help with is https://comicsbyxan.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    The site title/site branding div and the navigation div share the space in the header area. We can use the following to center your image, but it pushes the navigation down below the image. The following centers your image and also centers the navigation below it. 

    @media screen and (min-width: 601px) {
.site-branding {
  width: 100%;
  max-width: 100%
}
.navigation-main {
  width: 100%;
  max-width: 100%;
  text-align: center;
}
}
  • Unknown's avatar
    sailorxan · Member ·

    That’s fixed it! I suspected the navigation was messing things up somehow, but I didn’t know how to deal with it.
    Thanks for your help!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Centering title image in Panel theme’ is closed to new replies.