Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • September 13, 2015 at 1:28 pm #502301
    bahabady

    hi.
    I need to make mega menu open when user clicks on it. not while hovering.

    any help would be appreciated.

    September 14, 2015 at 11:11 am #502601
    Josue

    Hi,

    Open js/avia.js and look for the following:

    			megaItems.each(function(i){

				$(this).hover(

    Replace it by this:

    			megaItems.each(function(i){

				$(this).click(

    Regards,
    Josue

    November 2, 2015 at 8:32 pm #528779
    dnet-dev

    Just a note. This does not work for me.

    November 2, 2015 at 10:34 pm #528855
    Josue

    Hey!

    Try modifying this line instead:

    currentLink.bind('mouseenter', function()

    To:

    currentLink.bind('click', function()

    Best regards,
    Josue

    April 12, 2020 at 12:26 pm #1203074
    Shuaib

    Dear team,

    I couldn’t find the avia.js file. can you please help me?

    April 12, 2020 at 10:11 pm #1203168
    Mike

    Hi,
    Sorry for the late reply, the avia.js file is at /enfold/js/avia.js

    Best regards,
    Mike

    April 13, 2020 at 7:28 am #1203236
    Shuaib

    Hello Sir,
    in
    /themes/enfold/js/avia.js
    I couldnt find
    currentLink.bind('mouseenter', function()
    or
    megaItems.each(function(i){
    functions.

    Regards,
    Shuaib

    April 14, 2020 at 2:11 pm #1203589
    Mike

    Hi,
    True, it looks like this was re-written and moved to \wp-content\themes\enfold\js\avia-snippet-megamenu.js
    on line 176

    megaItems.each(function(i){

				$(this).hover(

    changing the “hover” to “click” should work, but there is also css that is opening the sub-menu on hover, and for my demo the parent items are also links so clicking them goes to the page instead of the open action. Are your parent items also links? I don’t believe this is going to work if you also want your parent links to work.

    Best regards,
    Mike

    April 14, 2020 at 5:24 pm #1203675
    Shuaib

    Hello Sir,
    I changed it but doesn’t work. :(

    		//bind event for mega menu
			megaItems.each(function(i){

				$(this).click(

					function()
					{

    Can you please share the css for opening sub menu on click. I have “#” on parent menu item.

    April 15, 2020 at 1:00 pm #1203956
    Mike

    Hi,
    I’m testing in the “2017 Demo”, so I used a “custom link” in the menu to replace the parent mega menu item so it would not have a clickable link. Notice that I enabled the custom classes in the menu so the parent item that will open on click can be targeted with the class “mega-menu”
    2020-04-15_061948.png
    Then I added this css in the Quick CSS:

    li.menu-item-mega-parent.mega-menu a.open-mega-a:hover ~ .avia_mega_div {
	opacity: 0 !important; 
	display: none !important; 
}
li.menu-item-mega-parent.mega-menu a.open-mega-a:focus ~ .avia_mega_div {
	opacity: 1 !important; 
	display: block !important; 
}

    This hides the sub-menu on “hover” but shows on “click”.
    After applying the css, Please clear your browser cache and check.
    Please note that I didn’t change the “avia.js”

    Best regards,
    Mike

    April 15, 2020 at 4:57 pm #1204053
    Shuaib

    Thank you,
    Yesterday I modified avia.js file from hover to click, but it didn’t work so i rolled-out the changes. but since that time i am neither able to click nor hover is working.
    I tried your css and cleared cache but not working. https://www.dvcom.ae

    I replaced file avia.js and megamenu java script file from original theme but still it is not working. Is there any fix for it?

    PS:I have created another mega menu and same issue is there.

    April 16, 2020 at 12:13 pm #1204384
    Mike

    Hi,
    On your menu item “solutions” I don’t see the class “mega-menu” as described above, did you use a different custom class?
    I see that the Enfold Theme Options > Performance > JS & CSS file merging and compression is enabled, please disable and clear your browser cache so the restored javascript files will load.
    If this doesn’t help, please disable your plugins to ensure there is not a conflict.
    If this doesn’t help, then we will need to take a closer look with an admin login and FTP access in the Private Content area, but as this is not your thread your login info will not be private, please open a new thread.

    Best regards,
    Mike

    April 16, 2020 at 2:00 pm #1204427
    Shuaib

    Hello Sir,
    You are the life saver, now mega menu is working after disabling the JS & CSS file merging and compression but on click still not working after putting css.
    Anyways i am leaving this on hover.

    Regards,
    Shuaib

    April 16, 2020 at 4:41 pm #1204465
    Shuaib

    May be css changes will reflect later because on this website css takes too much time to update, sometime 2-3 days. don’t know why.

    April 18, 2020 at 1:37 pm #1204901
    Mike

    Hi,
    OK, so you will be leaving it on hover.
    As for your css issues, if you would like us to take a look at this then please open a new thread and include admin login in the Private Content area so we can be of more assistance.
    Since this is not your thread posting your login here will not be private and you will not see anything we write in the Private Content area.

    Best regards,
    Mike

    April 18, 2020 at 2:29 pm #1204923
    Shuaib

    Thank you very much sir
    That thread is already open #post-1204875

    April 18, 2020 at 4:52 pm #1205005
    Mike

    Hi,
    Thank you, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘make mega menu open by click.’ is closed to new replies.