Replacing Header Text with a Logo, Responsively.

  • Resolved Banzboy

    (@banzboy)


    10 years ago

    First I want to thank you guys for a wonderful theme, it really caught my eye when I was looking for a portfolio website.

    What I’m trying to do is to replace the header text (name of the website), with a logo instead. I did some digging on the support forums and I found this code below from this thread

    .site-branding {
	max-width: 301px;
}
.site-title {
	width: 300px;
}
.site-title a {
	background: url(https://files.witnessthis.co.za/2014/06/Image-Header-to-be-used.jpg) no-repeat;
	display: block;
	width: 300px;
	height: 80px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

    This works great except for one thing, the size is static. On mobile the image size just remains the same and extends past the viewport.

    I’ve been trying to make it responsive for the last few hours but no success. Does anyone have an idea how?

Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Replacing Header Text with a Logo, Responsively.’ is closed to new replies.