How can I underline an active navigation link in the header?

Store Design
1

Hello,

In the header I have 4 menu items. 3 of them link to pages and one links to the booking app page.

And this one is not underlined when active.

I tried to add !important to text-decoration, but it did not help.

Hover works fine though.

Can anyone help?

Thanks!

2

@ArminasZ

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

@KetanKumar

Thank you very much!

Site url is: https://philmiodev.myshopify.com

1 Like
4

@ArminasZ

Your store is password protected Please share the storefront password.

Thanks!

5

@ArminasZ

if you have front end password is confidential so please to a personal message as you like.

6

@ArminasZ

i have check this bt your page was third part url doesn’t shopify allow shopify

7

@KetanKumar

Sorry, I did not understand it very well.

8

@dmwwebartisan

Hello again,

The store name: https://philmiodev.myshopify.com

Password: devjobs

Thanks!

9

@ArminasZ

Please share a screenshot of what do you want exactly.

Thanks!

10

Hi @ArminasZ ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.header__menu-item span {
    text-decoration: underline !important;
}

I hope it would help you.

11

@AvadaCommerce

It did not work..

Thank you for the option though!

12

@ArminasZ

Please add the following CSS code to your assets/base.css bottom of the file.

a.header__menu-item:active, a:hover {
    outline: 0;
    text-decoration: underline !important;
}

Thanks!

13

@Zworthkey

You have sent me a DM.

Sorry, but Shopify does not allow me to reply: it says I have “reached the limit of private messages” (what??).

14

@ArminasZ

Please add the following CSS code to your assets/base.css bottom of the file.

a.header__menu-item:active, a:hover {
    outline: 0;
    text-decoration: underline !important;
}

Thanks!

Let me know if not working.

15

@dmwwebartisan

Did not work…

To clarify I want Katalogas to be underlined when active (I’m now on that page). The thing is that this page comes from app. And in navigation Katalogas is a link to that app search page.

Screenshot(2).png
Screenshot(2).png1583Ă—525 93.4 KB

16

@ArminasZ

Please add the following CSS code to your assets/base.css bottom of the file.

your no added code base.css file please add code.

Thanks!

1 Like
17

@dmwwebartisan

Alright, added!

18

@ArminasZ

Please check following screenshot

2022-01-18_17-37_PhilmioDev.jpg
2022-01-18_17-37_PhilmioDev.jpg1259Ă—792 87.4 KB

1 Like
19

@dmwwebartisan

Silly mistake…

Thank you, changed.

1 Like
20

@dmwwebartisan

Shall I also make changes in global.js file to make it work?