header question

[micheal_w]

Hi Guys,

How can I achieve an exactly same menu header layout like here:http://shop.lululemon.com (apart from the top FREE SHIPPING stripe), so:

1. menus aligned to the left
2. logo in the middle
2. cart, search etc icons aligned to the right

#2 menu would be good I thing if I could add the menus (it will be mega menu) to the left.
Any (other) recommendation please?

[David Martin – Support]

Unfortunately that header layout is not currently possible. You would need to work with a developer to implement the new layout.

Thanks,
David.

[micheal_w]

Hi David,

Actually the no.2 header would work if I could put a max mega menu short code in the ‘Header left text config’ field.
The question is: is there a short code to use?

[micheal_w]

Actually, I found a way for the shortcode, here: https://www.maxmegamenu.com/documentation/integration-options/shortcode/
It seems work (pic1.jpg) but the styling does not follow the one that is setup in the theme, there is no styling at all for some reason…

Any idea please?

Attachments:

You must be logged in to view attached files.

[micheal_w]

Okay, it’s me again.
I have contacted the mega menu developer and asked the same question.
Please see it here: https://wordpress.org/support/topic/shortcode-issue-17?replies=2#post-8584316

Can you please advise how to proceed?
Thanks!

[David Martin – Support]

Please provide a link to your site so I can see this.

– David.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Please add this custom CSS:

.aux-item ul.mega-menu > li {
  display: inline-block;
}
.aux-item ul.mega-menu > li > a {
    padding: 0 10px;
}

[micheal_w]

Hi David,

I added the code, but the styling is not the same as the setup in the Theme options
+ the mega menu doesn’t work although it has been setup correctly… 🙁

[David Martin – Support]

Sure, this is because it is not currently supported in the shortcode setup as you are using.

You need to make these customisations if you want to integrate further or work with a developer, I can point you in the right right direction.

Please add this to your Theme Options => Custom JS

		jQuery( document ).ready(function() {
				jQuery(".aux-item ul.mega-menu").find("li.mega-menu-item-has-children").hoverIntent({
					over: function() {
						var isSideSlideout = jQuery(this).parents('.sf-side-slideout').length > 0;
						if ((jQuery('#container').width() > 767 || body.hasClass('responsive-fixed')) && !isSideSlideout) {
							jQuery(this).find('ul.mega-sub-menu').first().stop( true, true ).fadeIn(200);
						}
					},
					out:function() {
						var isSideSlideout = jQuery(this).parents('.sf-side-slideout').length > 0;
						if ((jQuery('#container').width() > 767 || body.hasClass('responsive-fixed')) && !isSideSlideout) {
							jQuery(this).find('ul.mega-sub-menu').first().stop( true, true ).fadeOut(150);
						}
					},
					timeout: 100
				});
	    	});	

[micheal_w]

Unfortunately it is still not good 🙁
I can understand that it is not currently supported, despite the plugin’s developer says it should be…

Well, I need to find some other solution…
Thank anyway…

[David Martin – Support]

The above JS will provide the dropdown facility, I have that working locally.

Thanks,
David.

[micheal_w]

Hi David,

I try to do dome detour and solve my issue somehow differently:
If using “Header Layout #1”, can the “split nav left” be aligned to the far left of the header?

Thanks!
…and sorry for asking too much…

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.header-1 .menu-left {
  text-align: left;
}

– Kyle

[micheal_w]

This reply has been marked as private.