Creating a hover colour for links on dawn theme

Store Design
1

Hello!

So I’m not a fan of the menu options and want my website to look more editorial. As a result I’m disabling the header menu and creating my own beneath it, aligned to the right of the website, like this:

Page One

Page Two

Page Three

So I’m adding individual links to the words so they link to the right page. What I’d like is that when someone hovers over one of the links, it changes to a specific colour so that it is clear that it is a menu.

Furthermore, is there a way to change the spacing. There’s too big a gap between the menu items.

Thank you!

2

Hello,

Can you share your website link?

You can change the color on hover, through CSS, as following:

a:hover {
color:red;
}

The above code would affect all anchors, you may want to target only the ones from a specific element, in your case, the navigation. Let’s consider that your new navigation has a the newNav class. To target this, you’d need something as the below:

.newNav a:hover {
color:red;
}

And assuming that your anchors are wrapped within

  • elements, you can adjust the spacing as following:

    .newNav li {
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
margin-left:10px;
}

    Let me know if this addressed your question.

    Cheers!

    • 3

    Hi Gabriel,

    Thank you so much for helping!

    So it is not on the website. I’ve created a separate copy and I’m prototyping a new design.

    So with the new menu, I’m just using the rich text. It does not have a newNav class and I don’t know how to add that. Do I need to add that?

    4

    For a proper targeting, yes, you’d need to add a CSS class.

    Assuming that your editor allows HTML - you can wrap your entire navigation content in a HTML, as following:

    
your content here

    Cheers!

    5

    Thank you for clarifying Gabriel.

    So I just write the menu items there. How do I manage the alignment, spacing and hover colour.

    I used the hover code by the way, it did not work.

    6

    The below code should work as expected:

    a:hover {
color:red !important;
}

    For further guidance, I’d need to see the website.

    7

    The hover is working now!

    Thank you!

    Lastly, how do I wrap the navigation? Do I just place the menu items in there? How would I choose the alignment and the links?