Line through my header

This is the basic idea:

h1.site-title:hover {
    background: silver;
}

but you might want to use an image instead of a color. Create a small graphic in the right color and use it with the repeat-x and repeat-y properties to have it appear as you like.

Thank you! I was hoping for a thin line that goes right through it. Not so much of a block background. Is that possible?

Yes, As I said, you need to create a silver line jpg file and use that as a background URL on hover.

Oh okay, that makes sense. I’m sorry, I am kinda new at this. How do I add that jpeg in once I’ve created it and uploaded it to my wordpress? I’m not sure what repeat x and repeat y are.
Thanks!

Upload the image and reply here with the URL. I’ll give you the CSS.

Here is a URL
https://signedsilverlining.com/wp-content/uploads/2018/07/Silver-Line-through.jpg

You made that image 400px high; it should be the height of the line itself plus maybe a pixel or two above and below.

When you get that right, the CSS would be

.site-title:hover {
    background-image: url('https://signedsilverlining.com/wp-content/uploads/2018/07/Silver-Line-through.jpg');
    background-repeat:repeat-x;
    background-position-y: center;
}

To add CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

• This reply was modified 6 years, 7 months ago by Steven Stern (sterndata).