Sela theme: Header Image Issue

  • Hi. My header image disappeared on the Sela theme and now that I have added a new one it does not adjust on mobile phones and does not link to the main page when clicked. Can you please help?

    The blog I need help with is theworldbyana.com

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • I am also having the problem of the header image not reducing in size for mobile phones.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    The header image for Sela was never designed to be used with header images with text embedded in them, but instead meant for photographic style images. We can change the background-size to contain instead of cover with the following, but as you will see the area at the top will gain a bunch of whitespace around the header image on smaller screens.

    You can both give this a try, which isn’t perfect in your case @theworldbyana, but does get you both a resized header on mobile. @rjbgillon, it does work well for your header image though.

    .site-branding {
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
	background-size: contain;
	height: calc(100vw * 0.05);
	min-height: auto;
}

    The header image in Sela is not clickable as a link to the home page.

    Thread Starter theworldbyana

    (@theworldbyana)

    I have had the header image link to the homepage since I created the blog and suddenly it decided to vanish and when I added the image again I cannot make it work. It also adjusted to mobile phones and stopped doing it. Anyone able to help with these issues?

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hmmm, I’m not sure what is going on with that. I looked at the Sela updates, and the only thing that has been deployed since July 2017 was foreign language translations, but that aside, the following custom CSS will get you a clickable header image. It takes the site title div and makes it full width and height of the header area and sets the color for the text-based site title to transparent.

    	position: relative;
}
.site-title {
	clip: initial !important;
	display: block;
	max-width: 100%;
	height: 100% !important;
	width: 100%;
	left: 0;
	top: 0;
}
.site-title a {
	color: rgba(0, 0, 0, 0);
	display: block;
	height: 100%;
}

    Only the site logo in Sela adjusts automatically for mobile screens, not the custom header, which is designed as a background image. The site logo is also clickable. Perhaps that’s what you’d been using before?

    To add a site logo, you’ll need the Jetpack plugin active.

    Then, go into your Customizer’s “Site Title, Tagline, and Logo” panel and add it there.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sela theme: Header Image Issue’ is closed to new replies.