Spotlight Theme Help w/ links

[Toast]

Hi there! New with shopify and trying to figure out how to edit some things, not very familiar with coding or CSS.

I'm trying to change it so when I hover over everything it changes to an underline. The main navigation menu does this because it was defaulted, but I want it to do it with the little icons on the top right (cart, search and profile). As well as the collection links on the front of my main page. Right now when I hover over them the arrow moves on the text, and the icons get a little bigger and blur.

Using theme "spot light." 

Thank you so much!

[Made4uo-Ribe]

Hi @Toast 

So do you like to add the underline hover on the icons and the other links in the homepage? Would you mind sharing your store URL? Thanks!

[Toast]

Yeah. Thank you! 

https://toasteesstore.myshopify.com/

[Made4uo-Ribe · Accepted solution]

Thanks for the info, check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
.header__icons {
    position: relative;
}
.header__icons .svg-wrapper:hover:after {
    content: '';
    position: absolute;
    top: 80%; 
    left: 55%;
    width: 35px; 
    height: 1px;
    background-color: black; 
    transform: translateX(-50%); 
}
.header__icons {
    padding-right: 0;
}

a.full-unstyled-link:hover {
    cursor: pointer;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: .3rem;
    color: rgb(var(--color-link));
    background-color: transparent;
    font-family: inherit;
}
</style>
{% endif %}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Toast]

Thank you SO much! And for being so fast. Thank you!