How do I make the top level link clickable on the menu using the Sense theme?

Solved

How do I make the top level link clickable on the menu using the Sense theme?

Pleasure_Blooms
Visitor
2 0 0

Just what the title says. I have found answers for people using other themes, but I can't quite seem to figure out the right coding for Sense. I have added hover dropdown to the menu, but I would also like the top level link to be clickable. How do I go about doing that? 

 

https://pleasureblooms.com

Accepted Solutions (2)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hi @Pleasure_Blooms ,

 

In order to make the top level link clickable you'll need to make some code edits. Please make sure to create a duplicate copy of your theme before trying code changes. Here are the steps:

 

1.  Choose "Edit code" next to the theme copy you want to edit.

 

2. In the code editor, search and open the snippet file "header-dropdown-menu.liquid".

3. Locate the following piece of code, this starts at line#19 in the latest Sense versions:

                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>


4. Replace above code with the below code:

                <a href="{{ link.url }}"
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </a>

 

5. Save the changes.

Watch the attached video to see how i did it in my store. I hope this will help 🙂

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Below is the updated code for color adjustment:

                 <a href="{{ link.url }}" style="color:rgba(var(--color-foreground),.75);"
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </a>
➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 9 (9)

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Hi @Pleasure_Blooms ,

 

In order to make the top level link clickable you'll need to make some code edits. Please make sure to create a duplicate copy of your theme before trying code changes. Here are the steps:

 

1.  Choose "Edit code" next to the theme copy you want to edit.

 

2. In the code editor, search and open the snippet file "header-dropdown-menu.liquid".

3. Locate the following piece of code, this starts at line#19 in the latest Sense versions:

                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>


4. Replace above code with the below code:

                <a href="{{ link.url }}"
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </a>

 

5. Save the changes.

Watch the attached video to see how i did it in my store. I hope this will help 🙂

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Pleasure_Blooms
Visitor
2 0 0

Thank you. That worked. Would you know how to change the color of those links? It switched to to hyperlink blue from the white that they were.

SumanSaurabh
Shopify Partner
69 26 27

This is an accepted solution.

Below is the updated code for color adjustment:

                 <a href="{{ link.url }}" style="color:rgba(var(--color-foreground),.75);"
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </a>
➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
CallumW
Visitor
1 0 0

I implemented your solution and it worked well thank you! I then tested it on mobile and the top level links weren't clickable. How would I fix this?

SamantaAlise
Visitor
2 0 0

Hello! Does this work on Down theme?

 

SumanSaurabh
Shopify Partner
69 26 27

Yes,this should work on Dwan theme as well.

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
DavidW81
Tourist
6 0 3

Hi Suman, 

 

I'm setting up my first web shop and this was a great help, thank you!

 

I have one follow on question. After the dropdown menu options were turned into links, they now have the underline of a hyperlink under them. But the only menu options that are underlined are the dropdown menus. I would like to remove that underlining from the links. I have tried a couple other solutions that I found which said to add code (below) to the end of the base.css file. However the links are still in the menu bar. 

 

Can you please explain how I can remove the underlining from those dropdown menus? Thanks!

 

 

Code I added to the base.css file under the assets folder

.header__menu-item:hover span {
text-decoration: none;
}

.footer-block__details-content .list-menu__item--link:hover, .copyright__content a:hover{
text-decoration: none !important;
}

secustore
Visitor
1 0 0

Thank you for the solution! 
I thought that the code would work for mobile as well. 
What additional changes needs to be made in order to make it work on mobile version? Can you advise please? @SumanSaurabh 

Snapbackkyng
Visitor
1 0 0

I followed all of the steps, copy and pasted the code and the top level still isn't clickable. They still only drop-down to show the subs.