Underline active menu in Impulse theme

bineshsingh
Shopify Partner
22 0 4

Hello all,

I want to add a feature where the active navigation menu will be underlined. I tried similar solutions posted to the community but it did not work out for me. Please provide suggestions regarding the feature. 

 

Replies 26 (26)

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello, 

Following is the link and view access.

https://love-and-above-cat-club.myshopify.com/

p/w: LAACC

bineshsingh
Shopify Partner
22 0 4

@dmwwebartisan  i have attached details above

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please add the following code at the bottom of your assets/theme.css file.

a.site-nav__link.site-nav__link--underline:active {
    text-decoration: underline;
}

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

When i click on the main menu option such as the "About" page, it underlines when I click on the menu but it does not remain underlined on the active page. 

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please remove last code and add this new code.

.site-nav__link.site-nav__link--underline:active {
    border-bottom-color: #000000;
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    right: 100%;
    margin: 0 15px;
    border-bottom: 2px solid;
    border-bottom-color: #594e4f;
    border-bottom-color: var(--colorNavText);
    transition: right 0.5s;
}

 

Let me know if this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

It's the same issue again. It still doesn't remain underlined in the active menu option.

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

"Active" should work but it seems it is not working. I will check more and get back to you with a solution.

Remove the old code that I have given for now.

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

@dmwwebartisan 

 

Thank you for the update. Please let me know. 

bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

I appreciate your time and effort. Please let me know if you have any suggestions for the solution. 

Regards,

Binesh

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please add the following code at the bottom of assets/theme.js file ( remember this is js code)

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

 

When you put this, let me know. I will provide you CSS and we will check if this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan ,

I have added the code as per request. Please look into it.

Thank you for the help!

Regards,

Binesh

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please remove previous code from assets/theme.js and add this new one.

$(function(){
    var current = location.pathname;
    $('.site-nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

I have added the code. Please look into it

Regards,

Binesh

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

 

.site-nav__link--underline.active {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    margin: 0 15px;
    border-bottom: 2px solid;
    border-bottom-color: #594e4f;
    border-bottom-color: var(--colorNavText);
    transition: right 0.5s;
}

 

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

I added the code but still its not working.

Regards,

Binesh

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Remove previous code of theme.scss.liquid file and add this new one.

.site-nav__link--underline.active {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    margin: 0 15px;
    border-bottom: 2px solid;
    border-bottom-color: #594e4f;
    border-bottom-color: var(--colorNavText);
    transition: right 0.5s;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan ,

It's still not working. Please look into it

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Remove old and add this new one. This should work.

Let me know.

 

.site-nav__link--underline.active {
    content: "";
    display: inline-flex;
    position: relative;
    bottom: 0;
    left: 0;
    right: 100%;
    margin: 0 15px;
    border-bottom: 2px solid;
    border-bottom-color: #594e4f;
    border-bottom-color: var(--colorNavText);
    transition: right 0.5s;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

When I click on the "home" menu. every available menu is underlined.  The rest of the navigation menus seems to be underlined.

Please look into it.

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

Js is giving a problem, I think. This takes a long time. Can you give staff access? If not then provide a theme zip if possible.

I will look into it and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

Please let me confirm whether I can provide you with the staff access. 

 

Regards,

Binesh

dmwwebartisan
Shopify Partner
12280 2546 3693

@bineshsingh 

You can send it to my email which is in my signature below.

I will look into it and give you a solution by tomorrow.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bineshsingh
Shopify Partner
22 0 4

Hello @dmwwebartisan,

If possible, I will send you the theme file or provide staff access. 

I really appreciate your help

Regards, 

Binesh

Talha1496
Visitor
2 0 0

Hey @bineshsingh ,

Did you get the solution?

Regards,
Talha

TreavorHHH
Excursionist
14 0 7

Any update