Mega Menu bottom row below columns

[Jackcoldrick]

Hey guys,

I’ve a quick question in relation to your mega menu functionality. I’ve currently got a mega menu working and displaying 2 columns @ 50% widths in the container. What I would like to be able to do is insert a row below both of these columns @ 100% width.

Is there any way I can do this? Or will I have to dig into the theme code in order to achieve it?

Any help is much appreciated.

I’ve attached a screen shot of what I’m trying to achieve! I just took a screenshot of my current menu and added the row in below it, similar to what I’d like to get working.

Thanks

Jack

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Since the structure is made with columns that isn’t possible by default.

The only workaround that I see is to define only 1 column and place the entire html that builds that mega menu inside that item content.

2 divs with 50% and after that 1 div with 100% and the respective content inside.

-Rui

[Jackcoldrick]

Thanks Rui,

I’ll try that and let you know how I get on.

[Mohammad – SUPPORT]

Hi,
Its ok. Try and let us know your feedback.
Thanks
Mohammad

[wired_pl]

Jackcoldrick: Did you managed to do this? I want to do similar thing, but a row which goes through all columns.

[Mohammad – SUPPORT]

Hi,
My colleague will assist you shortly.
Thanks
Mohammad

[Rui Guerreiro – SUPPORT]

@wired_pl

Do you have any mockup image? I’m not understanding exactly what you are trying to achieve.

-Rui

[wired_pl]

Please see the attachment.

In addition I have other question regarding mega menu, they were already added as a comment to http://www.swiftideas.com/knowledgebase/change-the-mega-menu-styling/ but it never showed up.

1. How to remove delay of a submenu. Currently, it doesn’t shows up right away.
2. How to make submenu of 100% width?
3. How to add a background color for a parent menu element on hover?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

@wired_pl

By default that’s not possible because it works with columns structure and doesn’t have rows. The only change is using only 1 column and place there all the html content to build the structure in your screenshot.

1) Add the code below to your custom css option

nav#main-navigation .menu > li {
     transition: none !important;
    -moz-transition:none !important;
     -webkit-transition: none !important;
    -o-transition: none !important;
    -webkit-animation-fill-mode: none !important;
    -moz-animation-fill-mode: none !important;
    -o-animation-fill-mode: none !important;
     animation-fill-mode: none !important;
}

2) You can choose the alternative mega menu style, guess it stretches to full width

3) Not possible with css. Only with some customization using jQuery that is outside of our support scope.

-Rui

[wired_pl]

Rui:

2). Interesting. Can you tell how?

3). Do you offer paid customization service?

[Rui Guerreiro – SUPPORT]

Hi,

2) Try that one
https://www.dropbox.com/s/re1y7cgea40ajtf/Screenshot%202015-08-05%2018.54.47.png?dl=0

3) No, but we recommend the folks from Werkpress

-Rui

[wired_pl]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Apologize for the delay, I tried a few css but couldn’t sorted it.
Will have to forward to our head developer to see if it’s possible.
Thanks

-Rui

[Swift Ideas – Ed]

1) Edit /js/functions.js lines 1031-1036 from:

jQuery('#main-navigation .menu').dcMegaMenu({
				rowItems: '5',
				speed: 200,
				effect: 'fade',
				fullWidth: true
			});

to

jQuery('#main-navigation .menu').dcMegaMenu({
				rowItems: '5',
				speed: 0,
				effect: 'fade',
				fullWidth: true
			});

2) You’d need to make the header full width for this to be possible.

– Ed

[wired_pl]

Hi Ed,

1. Speed has been changed to 0, but submenu, still doesn’t shows itself right away.
2. Option “Full Width Header” set to On, but it didn’t made the submenu in full width.