How to change the hover from dot to underline

Hello,

Good day! I would like to ask how can I change the hover on the header menu from dot to underline.

Thank you.

Hello, can you please provide a link to your website in order to let me check it?

You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

Good day to you.

Here’s the link to my website
https://bit.ly/3ftUuSk

Hello, thank you for the link.

You can try to select the Basic 5 - outside header option in Customize → Header → Menu section. Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hello Roman,

Good day.

Upon checking, " Basic 5 - outside header " doesn’t existing on the selection. Please refer to the screenshot below.

image

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.main-navigation a:hover:after,
.main-navigation .current-menu-item:after {
    width: 100% !important;
    border-radius: unset !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
}

Kind Regards, Roman.
aThemes Support

1 Like

Thank you, Roman, it work but I got a little concern. How to “trim” the yellow underline just like on the screenshot.

image

I am just curious, do CSS codes added on Additional CSS will NOT be wipe out once there is a new update on the Airi Theme? By the way, I created a child theme.

Hello,

How to “trim” the yellow underline just like on the screenshot

You can try this CSS code instead:

.main-navigation a:hover:after,
.main-navigation .current-menu-item:after {
    display: none;
}

.main-navigation a:hover,
.main-navigation .current-menu-item {
    text-decoration: underline;
}

do CSS codes added on Additional CSS will NOT be wipe out once there is a new update on the Airi Theme?

That CSS code will not be removed after any update, just like the CSS code in your child theme.

Kind Regards, Roman.
aThemes Support

Hello Roman,

Greetings!

I am checking the header menu on airi-lawyer (https://demo.athemes.com/airi-lawyer/) would it be possible to apply that hover effects on my current header (https://bit.ly/3ftUuSk)?

Regards,
famparo

Hello,

Try to select the Basic 4 - inside header option in Customize → Header → Menu section.

Kind Regards, Roman.
aThemes Support

Hello Roman,

Yes, I saw that option on the header > menu, however my concern is the extra space on the top. Please see the attached screenshot. My question is, is it possible to have a customize css for the airi-lawyer header style to be applied on my current header?

Please bear with me.

Hello,

I don’t think that there is an easy way to do it properly, unfortunately.

Kind Regards, Roman.
aThemes Support

Hello Roman,

Here’s the link to my website
https://bit.ly/3ftUuSk

Regards,
famparo