Shopify RIDE Theme Footer & Header Menu Problems - Boldlythreaded.com

We are in the midst of setting up our Shopify store and are experiencing issues with respect to the header and footer navigational menus.

Shopify Store: 7ac63e.myshopify.com

Header Menu

I am trying to set it to where specific top level menu links remain clickable. For example, I added a menu tab called “About” to the header and added nested pages to it. Now, the “About” link is no longer clickable; it merely expands the nested links. Can you tell me how I would go about keeping the top level menu link clickable?

Footer Menu

I am trying to setup four columns in the footer area, which will be populated with site links. Not seeing another way to do it, I added four nav blocks to the theme > customize > footer section, and renamed those blocks; however, there is no way to add links to each individual block from this area, but I can add footer menu links via the Shopify Admin > Sales Channels > Navigation tab. But, adding a link to this menu replicates the link across each footer menu section. (see screenshots) Can you tell me how to resolve this so that specific links appear under their respective footer menus?

Thanks! Josh

Hey Josh,

So on this point

Header Menu

If the item was clickable and brought them to the About Us page they’d never be able to see the dropdown navigation items? Don’t think that’s what you would want?

Footer Menu

I get what you’re trying to do here, I just checked on my own test store and faced the same problem so I don’t know is it possible without changing some code.

1 Like

Hey Paul,

Thanks for your reply.

For the header, in the About drop down scenario, I would like them to be able to click on not just About, but all the sub menu links from the about drop down. In reality, about will not be the actual menu. Just trying to work out what code edits / adds need to be made to get the top level header menus to function as I hope.

For the footer, I agree- code edits will need to be made to get the menus to work as I need them to, I just do not know what the code is or where to insert it.

I did further research using chatgpt and the program confirmed this menu issue is a known problem, and the workaround entails editing the theme code. It even provided some example code inserts, but I am not sure if they will work with theme liquid. I also encountered a few Shopify sites that have their menus setup like I want, but I could not locate a solution to getting my store to do the same.

Hopefully, a Shopify pro can jump in to help.

Hey mate, I put together this video just to show the footer stuff. Shopify doesn’t let me upload videos to will take a few mins for vid to upload to youtube.

https://youtu.be/MbacAcR0IWs

I think that will hopefully help. if you want the main header text in the footer to be clickable that will have to be a code change

1 Like

Footer RESOLVED! (How can it not be? lol) That vid you made for the footer fix is awesome!! It didn’t even dawn on me, likely from fatigue, to add the footer blocks as text, and then map the links that way. You are the best! And thanks for going the extra mile w/ the vid!!

As for the main/header / top-level menu link issue, code edit is a for sure. I have a possible solution,hoping for your 2 cents on its accuracy :slightly_smiling_face:

  1. Edit theme
  2. Sections > header.liquid (open)
  3. Look for the code that ties to the header… usually involves an unordered list (<ul>) of links (<a>). For example:

  1. To make a top-level menu item clickable, wrap the entire list item (<li>) in an anchor tag (<a>). For example:

  1. Update hyperlinks/pages accordingly

  2. Save

Thanks again for helping out this mega noob! :slightly_smiling_face:

Shopify fatigue is definitely very real! Glad you got it fixed.

Ok so the code you shared, all that is doing is adding two extra nav items (Top Level Page 1 and Top Level Page 2) and it’s wrapping the a element text in an li which in general you’d never want to do.

I pasted your code in here just to show what it is doing

https://codepen.io/PaulRyan17/pen/yLRpzPV

So in your navigation menu, your About navigation item is a summary element, when this summary element is clicked it then launches your submenu which is ul with li children. I shared a screenshot below.

1 Like

Yeah I see that now, on both points wrt code and fatigue. I am glad I did not listen to the AI that gave me that code :face_with_tongue:

Luckily, the footer fix you offered worked like a charm, and the footer menu is as I want it to be (in terms of link structure), I will learn to live without the top level header menu feature for the time being since finalizing the site footer is the more pressing.

Thanks for walking me thru everything! I am sure I will be back with more footer questions in the near future- the next hurdle is to shrink down the footer menu contents.. perhaps even using an accordion dropdown system. (One can dream.)

Thanks again!.