change hover color and add responsive header text

  • rosecw

    (@rosecw)


    10 years, 2 months ago

    hi

    I’m trying to add a hover color for the header text on my site, and also write a media query that will shrink that header text at mobile size (right now it’s distorted on mobile). I’ve done this with css before, but never using a wordpress theme — not sure why I can’t figure it out now!

    I did create a child theme, but right now there’s nothing in its stylesheet. my custom css has all been done in the Customizer.

    Here’s the site: rosecwelcome.com

    thanks for any help!!

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

    (@paulwp)

    10 years, 2 months ago

    Hi

    The word “WELCOME” should not be part of site title, we can put it in via CSS content. Also we don’t need to put in capitalized text, just use normal text and use CSS to make it all uppercase.

    This code below will do just that (please remove the welcome text and un-cap the site title first), and also assign hover color.

    body #masthead h1.site-title a {
	text-transform: uppercase;
}
body #masthead h1.site-title a::after {
	content: " Welcome";
}
body #masthead h1.site-title a:hover {
	color: #ff0000; /* color on hover */
}

    This code below will scale the site title text responsively (or adaptively).

    @media (max-width: 1200px) {
	body #masthead h1.site-title { font-size: 36px; line-height: 1.5; margin: 0px; }
}

@media (max-width: 960px) {
	body #masthead h1.site-title { font-size: 30px; letter-spacing: 5px; }
	.site-branding { margin: 30px 0px; }
}

@media (max-width: 600px) {
	body #masthead h1.site-title { font-size: 24px; letter-spacing: 2.5px; }
}

@media (max-width: 480px) {
	body #masthead h1.site-title { font-size: 18px; letter-spacing: 1px; }
}
    Thread Starter rosecw

    (@rosecw)

    10 years, 2 months ago

    thank you so much for the reply and the fix!! All works perfectly now.

    Fun fact: the reason “welcome” was part of my site title is that it is my actual last name. 😉

    paulwpxp

    (@paulwp)

    10 years, 2 months ago

    You’re “Welcome”!

    You got the best name in the world 🙂

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

The topic ‘change hover color and add responsive header text’ is closed to new replies.