Parent Menu Item Links are being removed in frontend HTML

SpectrussJacob
Member

Hello,


I have created a navigation menu on a client's new website, with flyouts, etc. Our menu works well enough (styling it was a bit more tedious that I'd have liked, but that's for another post) - Now, when the menu is shown in the frontend, the page links are being removed from parent items which have children (Parent items without children have their links)

 

I've scoured the forums, and even talked to support, and the support agent recommended I post in this forum. You can view the site here: https://transcard.com/

An example of a parent item which has the proper link is the "contact" item (which has no children)

All the other parent items are assigned page links, except for "about".

The support agent suggested maybe my CSS could be causing this, however my CSS is fairly standard/based off the articles in the knowledgebase, and I'm not seeing anything that (as far as I know) would remove an href attribute from an element.

Any help is appreciated. I may not be able to provide all of our code, since this work is for a client, however you can view the relevant CSS in the browser inspector.

0 Upvotes
7 Replies 7
bschneidewind
Top Contributor | Diamond Partner

More likely this is a JS issue rather than a CSS issue.... when I disable the primary JS, it shows the HREF as a javascript item. 

0 Upvotes
SpectrussJacob
Member

This is more what I was thinking may be the cause! However, i believe the only JS I've added is the standard JS to make the mobile menu work.

0 Upvotes
bschneidewind
Top Contributor | Diamond Partner

Is this a hubspot theme or framework? Do the parent links work in their demo? It may be intentional.... 

0 Upvotes
SpectrussJacob
Member

No, it is completely custom. However, I found the issue. It was a line I had added earlier, which was a sort of quickfix to prevent another bug.

$('.child-trigger').siblings().removeAttr("href");

This line was added, because if not present, a strange bug appears; I have commented out the line for now, so you can recreate the bug for yourself:

Note: this only occurs on mobile menu (so tablet or mobile view of your choice in inspector)

1. Open the menu using the menu icon
2. Click on "about" (not on the plus sign, but on about itself) - Now the about submenu is open.
3. Now, try to click the plus sign on another menu item to open the submenu

Sometimes, this causes you to visit another page. Other times, this causes the wrong submenu to open. Depends on which item you click after clicking "about", it seems.

This is a strange bug, and the only way I could figure to quickfix it was to remove hrefs from siblings. However, this was before I had actually added links, so now that I've added links, it's not ideal.

Thoughts?

0 Upvotes
bschneidewind
Top Contributor | Diamond Partner

Try updating the href of about us - looks like it is set to trigger javascript, whereas the other parent links are pointing to the destination URL. (when you view source, you can see the difference in the href's)

0 Upvotes
SpectrussJacob
Member

I believe this is the default behavior/render of a non-link parent which has children.

0 Upvotes
bschneidewind
Top Contributor | Diamond Partner

So some parents are links and some aren't?

From a User Experience perspective it should be consistent across the board. Might be better to add a general link as the first item in each dropdown (overview) rather than the mix and then make all the parent items non-links....  just my .02 🙂