Dropdown Submenu

[orbitmansion]

Hi, this might be the most stupid question in the world, but after 7 straight hours of working on customising my site I’m left scratching my head with something…

I’m trying to figure out how to make the first level of the dropdown-submenu clickable (so that it goes to the actual URL that’s specified).

Right now I’ve got:

<li class="dropdown active">
    Contact Us<i class="fa fa-angle-down"></i>
    
  
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
             Meet The Team
             <ul class="dropdown-menu">
                  
Staff 1
                  
Staff 2
                  
Staff 3
                  
Staff 4
             
            
	
Photo Gallery
    

Everything displays as it should and I can click on all the ‘team members’ to go to their profiles, however I want to be able to click on “Meet The Team” as I have a page with all the team members on it…but alas, I can’t work out how to make it work!!!

Help 🙂

---

[orbitmansion]

<li class="dropdown active">
    <a class="dropdown-toggle" href="contact-us.html">Contact Us<i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
             <a href="meet-the-team.html">Meet The Team</a>
             <ul class="dropdown-menu">
                  <li><a href="staff1.html">Staff 1</a></li>
                  <li><a href="staff2.html">Staff 2</a></li>
                  <li><a href="staff3.html">Staff 3</a></li>
                  <li><a href="staff4.html">Staff 4</a></li>
             </ul>
        </li>    
	<li><a href="photo-gallery.html">Photo Gallery</a></li>
    </ul>
</li>

---

[Support]

Hello, can you please confirm which version are you using?

If you’re using Porto 3.4+ it must work if you do something like this:

<li class="dropdown">
	<a class="dropdown-toggle" href="about-us.html">
		About Us
		<i class="fa fa-angle-down"></i>
	</a>
	<ul class="dropdown-menu">
		<li><a href="about-us.html">About Us</a></li>
		<li><a href="about-us-basic.html">About Us - Basic</a></li>
		<li><a href="about-me.html">About Me</a></li>
	</ul>
</li>

Kind Regards,

Jonas

---

[orbitmansion]

Yeah, hi I’m using v3.4.1…

If you take a look at my reply #10005492 above, the code you provided is almost the same up until mine goes down the ‘dropdown-submenu’ route.

My question is, how do I make the top level item within the ‘dropdown-submenu’ (in my case “meet-the-team.html”) go to that page when I click it?

Right now if I hover the mouse over it, it displays the link for me to click, but when I do nothing happens. If I then navigate to one of the items in the submenu itself, let’s take “Staff 1” as an example, when I click on that it takes me to that staff profile.

Am I making sense?!? 🙂

Perhaps you could take my code and paste it into a nav bar yourself and try it out. I’m sure you’ll see what I mean…

Thanks

---

[Support]

Hello, ok, now I understand 🙂 – looks like it’s a problem with the bootstrap nav, I think the best way to fix is to add the following script:

(js/custom.js)

$('.nav-main .dropdown-submenu > a:not(a[href="#"])').on('click', function() {
	self.location = $(this).attr('href');
});

Let me know if you need further assistance.

Kind Regards, Jonas

---

[orbitmansion]

Hi Jonas, thanks for looking into this…

I’ve added that script to the js/custom.js but it’s still not working 🙁

Any other ideas?

Thanks

---

[Support]

Hello, I actually just tested it here with my local version and your code and it worked.

Can you send me the URL so I can check?

Thanks.

---

[orbitmansion]

Quick follow up – I’ve solved it!! Thanks to a snippet of your script that I applied directly to line 2076 of the theme.js

self.$wrapper.find(‘li.dropdown > a:not(.disabled), li.dropdown-submenu > a:not(.disabled)’).on(‘click’, function(e) {

self.$wrapper.find(‘li.dropdown > a:not(.disabled), li.dropdown-submenu > a:not(a[href="#"])’).on(‘click’, function(e) {

🙂

---

[Support]

Great you figured it out! It makes perfect sense now!

I’ll update the theme with a fix for it as well.

Thanks.

---

[Author]

Posts