How can I add a hover effect to my website's title?

Store Design
, ,

Topic summary

Goal: add a hover effect that changes the website title color to blue.

Initial suggestion: apply a CSS hover rule to menu items (.menu-item:hover { color: red; }).

Clarification: the effect should target the title text “Shop vintage Fashion,” not a menu item.

Updated guidance: find the exact CSS class of the title element (e.g., .banner .title) and apply a hover selector to change its color (e.g., .banner .title:hover { color: blue; }).

Technical notes: use CSS class selectors and the :hover pseudo-class; identifying the correct DOM class is required before styling.

Action items:

  • Inspect the page to confirm the title’s class name.
  • Add the hover CSS rule to the site’s stylesheet or theme custom CSS.

Status: not fully resolved; pending confirmation of the title element’s class.

Attachments: a code snippet is central to the solution; a screenshot and site link were referenced but not needed to understand the approach.

Summarized with AI on January 16. AI used: gpt-5.
1

Hello,

I want to add a hover effect to my websites title (the effect is supposed to change the title color blue.

This is the link to my website:

And a screenshot:

Bild 11.10.23 um 17.27.jpeg
Bild 11.10.23 um 17.27.jpeg2134×1320 270 KB

Thank you very much for any help

2

Hello @Regardez

  1. Please confirm the class name of the menu first, for example.menu-item
  2. Then add the following css
.menu-item:hover{
  color: red;
}
3

Hi, thank you for te reply. I don’t want to add the effect on a menu item but on the title (Shop vintage Fashion)

4

ok then need to find the word “Shop vintage Fashion” class name such as .banner .title

and do the same thing

.banner .title:hover{
  color: red;
}