Removing Column Headings from Integrity Mega Menu

Support
#1

Hi guys,

I’m trying to build a mega menu similar to the Shortcodes mega menu here http://demo.theme.co/integrity-1/ with one difference - no column headings. Could someone help me out?

Thanks,

Jamie

#2

Hi @themed,

Thanks for writing in.

You mean this header in the column?

If it is, you just do not add the header as submenu.

For example,

For full guide of using mega menu, you could check the link below:

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi Nico,

Sorry but your solution doesn’t work. When the header submenu is removed (‘N. America’ in your example), all sub items (‘Yukon’, ‘California’, etc) move one to the left and then become header submenus themselves.

Before:


After:


I want the mega menu appearing the way it did before - just minus the column headings.

Thanks,

Jamie

#4

Hi Jamie,

We are sorry for the misunderstand. Unfortunately you can not delete the headers and you will need to have headers for each column. But you can hide them in the front end of the website. So basically you need to add the headers and all the stuff you already done for the megamenu. After that you need to add the CSS code below to X > Theme Options > CSS:

.x-megamenu > ul > li > a {
    display: none !important;
}

Thank you.

#5

Thank you! It worked!

#6

Hi Christopher,

The mega menu’s working great now when viewing the site from a laptop. When viewing the site from a phone however the mega menu doesn’t drop down when the two down arrows are touched. Any idea how I could fix this problem?

Thanks,

Jamie

#7

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#8

Sure. https://blogs.themantic-education.com/ibpsych/

Thanks!

#9

Hi Jamie,

Please update the CSS code provided by Christopher above to this:

@media (min-width: 980px) {
	.x-megamenu > ul > li > a {
    	display: none !important;
	}
}

You can not remove the categories headline on the mobile menu though, because those are the trigger for your sub-menus to show up.

Cheers!

#10

Thanks Friech. Your solution has partially fixed the problem. When I narrow the browser window on my laptop to resemble a smartphone, the mega menu works. However when I view the site via Safari or the Google app on my phone, the mega menu is still not fully functional; that is, the mega menu doesn’t drop down when the two down arrows are touched.

Jamie

#11

Hi Jamie,

To fix it, you can add this in Theme Options > JS

jQuery(function($) {
$('.x-sub-toggle').on('click touchstart',  function(e) {
    e.preventDefault();
    $(this).toggleClass('x-active').closest('li').toggleClass('x-active');
});
});

Hope that helps

#12

Thanks Paul. Your solution’s a little buggy. When I view the site from my phone, sometimes when I tap the two down arrows, nothing happens. I sometimes tap the icon four or five times and nothing happens. However other non-megamenu items in the nav menu such as Home, Resources and About work all the time.

Thanks,

Jamie

#13

Hi Jamie,

I don’t think the problem started with what we suggested. Please remove any code suggested to you in this thread and try the menu in the phone. If it is still not working then you should follow the steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  5. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

#14

Hi Christopher,

I’ve followed all of your advice and the mega menu is still not working the way it should on mobile phones. Could you please take a look? I’ll attach the URL, username and password as a secure note.

Thanks

#15

Hey @themed,

I checked your site on my phone and when clicking on the dropdown arrows, it works fine. Could you tell us the specific version of your Safari and device?

Also, could you test if the Ethos 1 demo “Music” menu link works on your end? I’m asking because it works the same in your site.

Thanks.

#16

Hi Christian,

I’ve got an iPhone 6S running the latest version of iOS. I’ve installed the latest versions of Chrome, Safari and Firefox and the mega menu isn’t showing up on all browsers.

I tried the Ethos 1 demo Music menu through my phone and it works.

Thanks,

Jamie

#17

Hi @themed,

Are you saying that you’re expecting to see a mega menu on mobile instead of standard mobile menu? Mega menu is only applicable for the desktop. Or perhaps, please provide some screenshot of what you’re seeing and a mockup of how it should be.

Thanks!

#18

Hi Rad,

Please see the screenshot below. This is all I get at the moment. The ‘I’, ‘II’, ‘III’ and ‘IV’ submenus don’t expand on a mobile phone - but they do on a desktop. I followed all of Christopher’s advice above.

Thanks,

Jamie

#19

Hi Jamie,

I can reproduce this issue on iOS devices as well, please either disable the caching plugin or configure it, then provide us with FTP access in secure note, so we will be able to debug this issue further.

Thanks.

#20

Hi Alaa,

Sorry for the delay. I’ve disabled the caching plugin. Below I’ll provide a secure note with FTP access.

Thanks,

Jamie