Add href link to Content Area Dropdown toggle text

Support
#1

Hi,
Because the new header builder does not have mega menu support I created mega menus utilizing the content area dropdown element. That said, I would like the toggle text from the dropdown element to link to a page. I read through the forum, and tried numerous different solutions, however I cannot find anything directly addressing what I am trying to do. The site is for a high-profile client so unfortunately I cannot share access to the site. I was also going to share a screenshot via the secure note however this does not seem possible.

#2

Hi @timmichar,

Thanks for writing in.

At this moment, I am not sure of what you want to achieve. This would not be a final suggestion however you could try adding this in your Content Area Dropdown Content:

<a href="your.url">Your URL </a>

Hope it helps.

Let us know how it goes.

Thanks.

#3

#4

Hi @timmichar,

This link below is a great guide for you to add a link to your menu. The codes suggested is to add a link to the menu item.

Hope it helps.

Let us know how it goes.

Thanks.

#5

Hello Nico,
I don’t know how to better describe what I am trying to do, but you do not seem to understand. Can you please have someone else take a look at my issue please.

Kind regards,
Tim

#6

Hey Tim,

Sorry for the confusion, please give your toggle text element a class e.g custom-anchor-link and then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	var link = "http://google.com/";
	$('.custom-anchor-link').wrap('<a href="'+link+'"></a>');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#7

Hi Nabeel,
That almost worked. It does attach the href to the primary text, however there is no event when clicked.

So, if I hover over the anchor I can see the href url, but when I click on it nothing happens.

Also, I have some css the forces the dropdown content to open on hover rather than on a click. When I add the jQuery solution you gave it negates the css, and the anchor has to be clicked again in order to trigger the dropdown. . .

.x-anchor:hover + .x-dropdown,
.x-dropdown:hover {
  visibility: visible;
  pointer-events: auto;
  opacity: 1.0;
  transition: all .3s ease-in-out;
  transition-delay: .1s;
  transform: none;
  transition-duration: .3s;
  -webkit-transition-property: opacity,transform; /* Safari */
}

Thanks so much for your help.
Tim

#8

Hi Tim,

Please update the given JS code to this:

jQuery(document).ready(function($){
$(".linked-dropdown").click(function(){
  document.location.href = "http://www.cnn.com";
});
});

Then replace the http://www.cnn.com to where do you want the dropdown toggle to be linked.

And add a CLASS linked-dropdown to your dropdown element.

We like to continue on helping you with this Tim, but this already fall outside of the scope of support that we can offer, if you need further customization that is Content Area Dropdown is not capable of, please utilise the UberMenu extension instead.

Cheers!

#9

Hi @friech,
Luckily for me this worked. Thanks to you and the rest of the team for the assist.

Kind regards,
Tim

#10

You are most welcome. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.