Trying to make Divi's Theme dropdown menu OnClick instead of hover [on hold]

I'm using the DIVI theme and making some relatively simple modifications to it to better suit my needs. One thing I'm having some difficulty with though surprisingly is swapping out its vertical menu's hover state drop downs to onclick functionality.

I've put together an example of the code below here: JSFIDDLE

    $('').children('.menu-item-has-children').click(function(){         $(this).children('.sub-menu').slideToggle('slow');     }).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements         event.stopPropagation();         return false;     }); 

Oddly, though I can't seem to remove the hover state functionality from the menu. An example of DIVI can be found here: DIVI

Note: You'll need to go to headers in the navigation and choose the dark vertical navigation to replicate my layout.

Thanks in advance for your thoughts!


Category: theme development Time: 2016-07-28 Views: 0

Related post

  • Dropdown menu closes when I hover the options 2016-04-04

    Im using Jade and CSS for a dropdown menu here is the jade: .dropdown button.dropbtn(type="button") Me .dropdown-content a(href="/favorites") | Favorites a(href="/update") | Edit a(href="/logout") | Logout and here

  • Dropdown Menu: Infinite Slide on Hover with jQuery 2016-02-12

    I have created a simple dropdown menu with jquery HTML <ul> <li>Page A</li> <li>Page B <ul> <li>Dropdown</li> <li>Dropdown</li> </ul> </li> </ul> Jquery

  • How do I best maintain top level nav links when they open a dropdown on click instead of hover? 2013-10-28

    I'm working on a Bootstrap site and having difficulties figuring out the best solution for structuring the nav. There will be about 5 top level items, each with their own subpages accessible through dropdowns. Research seems to point to click being t

  • Dropdown menu keeps skipping away 2016-02-05

    I am creating some websites and I am always using the same dropdown method for them. However i am stuck with my dropdown menu. When I hover on it it always replaces my main navigation and well lets say that not so customer friendly. The problem proba

  • paper-dropdown-menu options are horizontally stacked instead of vertically stacked 2016-01-29

    In the Polymer labs todo-list, i added a paper-dropdown menu like so in index.html <body unresolved class="fullbleed layout vertical"> <span id="browser-sync-binding"></span&g

  • widget dropdown menu code 2011-06-14

    I'm trying to put in a simple dropdown menu in my widget. I copied one out of a previous widget and trying to substitute my own values into it. The submenu shows, but when I click save, it saves only the first selection (design 1). Actually, I echoed

  • Adding a dynamic Active Admin utility dropdown menu 2016-02-13

    I am new to Active Admin and am trying to add a dynamic utility dropdown menu like this: config.namespace :admin do |admin| admin.build_menu do |menu| menu.add label: "Company", priority: 1 do |company| company.add label: "ABC Company"

  • Contact form 7 Wordpress: Trying to make a dropdown menu to trigger an alert 2016-01-26

    I am created a contact form in Wordpress, using Contact form 7 - plugin. Is it possible to create a dropdown-menu, in which, an action is triggered when the user selects one of the options from the menu? e.g. displays an alert saying something like "

  • The Right Way to Make a Dropdown Menu 2009-04-01

    There's been a lot talk on SitePoint recently about dropdown menus, and not all of it entirely accurate. So I felt the need to chip-in and set the record straight on matters of best-practice, when it comes to JavaScript menus in all their forms. Firs

  • How do I theme a menu to have a wrapper div with menu name? 2012-01-20

    The default menu theme function doesn't output the menu name (see below). function theme_menu_tree($variables) { return '<ul class="menu">' . $variables['tree'] . '</ul>'; } I've inspected $variables, and that doesn't contain the men

  • Dropdown menu on custom theme not working 2016-03-03

    I am trying to create a dropdown menu for a theme I am developing but the sub menu items are showing up in the alongside the parent menu items. I have it saved as a submenu item here is what it looks like our programs should be under about us now it'

  • Make the content area div come next the menu bar 2010-12-16

    This is my css code, i would like to make the content_area come to the right of the menu_bar, at the moment it comes at the bottom of the menu_bar body{ color:#000000; font-family: arial, san serif; } #container { margin-left: 10%; margin-right: 10%;

  • How do I make a clickable dropdown menu 2013-03-12

    How do I make a clickable dropdown menu? I'm making a dropdown menu that allows the user to click the item they want. I would like then like that page appear automatically, or at least allow the person to click on the item and taken to the new page.

  • Make a dropdown menu and submenu navigation with css 2016-01-24

    #header{ background: url("../images/naviBack.jpg"); width: 100%; } a{ display: block; } .ic{ color: #1B7EDB; text-align: center; display: inline-block; font-size: 4vm; } <div id="header"> <ul class="list-group"> &

  • Trying to make a Go Launcher theme, AndroidManifest is bugging 2016-01-29

    I am trying to make my own Go Launcher icon pack. This is what it looks like so far; Im getting an error; Error:Execution failed for task ':app:processDebugManifest'. Manifest merger failed with multiple errors, see logs My manifest looks like this;

  • How do i adjust menu header in divi based theme extra [on hold] 2016-02-20

    How do i decrease the size of the header menu one in purple and also add a bit of padding i am using the divi extra theme and I have tried #et-navigation{ padding-top:10px; padding-bottom:10px; height:63px; } And its not working their is two much a g

  • Can i concatenate 2 values and put them in a dropdown menu 2013-06-14

    So I am making this excel sheet and I want to keep it as simple as possible ant not use VB. So I don't even know or think if its possible. I know how to use the concatenate function but can I concatenate 2 dropdown menus to make a third one? ex Dropd

  • Make Theme Options Menu item more easily / directly accessible 2014-09-14

    Is there a way to make the Theme Options Menu more visible? It contains my client's many specific options, he will need to access it every once in a while. By default, it's pretty well hidden underneath Appearance. Have you found a good way to bring

  • jQuery - Trying to make one function to work with multiple, same class, divs 2016-01-21

    So i'm trying to make a simple gallery viewer in jquery. I have something like this in my code: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <img />

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 1.539 (s). 13 q(s)