Managing Mega-Menu

Please reference the attached image.

Missing file attached

Attachments:

You must be logged in to view attached files.

Hello,

As you want to use your desired links inside the mega menu. You can use the ”Extra Menu List” theme element, and use your link in “URL” field and use that HTML BLOCK inside the menu items of Category menu from Appearance >> Menus.

Screenshot of Link Field: https://jmp.sh/LnJpf2L

URL field for desired link: https://jmp.sh/KazAOlP

Best Regards.

Hello,

I have already created a mega-menu with links as shown in the previous attached screen-shot.

The Goal:
—
onClick of “BROWSE DEPARTMENTS”- I want to display the created mega-menu (HTML Block) instead of displaying individual parent categories like “Furniture, Cooking, Accessories, Fashion, Electronics etc” which then opens the different associated menu-menus.

Regards

Hello,

As you want to display (HTML Block) instead of displaying individual parent categories like “Furniture, Cooking, Accessories, Fashion, Electronics etc”. To achieve this you have to create a new menu and inside it, you have to create a custom link or any other item then add your html block.

It works in the same way that you want, but with the categories menu it is not possible to directly display a mega menu except of sub items. Categories menu not designed in this way and the BROWSE DEPARTMENTS is just a string it did not exist inside menus, so you can not add html block in it.

Best Regards.

Hello,

We’re still unable to execute on the interaction design of the mega-menu after following your instructions.

Please use the login info provided to assist in creating a demo of what we’re requested.

Regards.

Hello,

As per your request I have created a demo for your understanding. First I created a new menu “Testing” from Appearance >> Menus. Then I select the “HTML BLOCK” for mega menu “Menu Shop”. After doing this I go to WoodMart >> Header Builder >> Your default header >> Header bottom row, I remove the categories menu and add the menu which I have created recently. Now when you click on “BROWSE DEPARTMENTS” it will display a mega menu.

Video for clarification: https://jmp.sh/RJ7MHES

Best Regards.

Hello and thanks for taking the time to resolve the matter and creating the walk-through video. Much appreciated and problem solve.

Regards.

How can we style the new customer menu link to look like the default had we select the “Categories” element instead of the “Menu” element within Woodmart > Header Builder.

—
We want to keep the following design features with the custom link menu:
– Hamburger Icon
– Inherit the primary background color
– Maintain the same width

Regards

Most Welcome,

I’m glad that your menu issue is fixed now.

To get the same styling for that custom menu as like categories menu, you have to follow the below steps:

1) For “Hamburger Icon” you have to use “fas fa-bars” icon inside your menu. You just have to write “bars” in “Icon name (from FontAwesome set)” field to get the icon, from Appearance >> Menus.

Screenshot for clarification : https://jmp.sh/MmNimCb

2) To apply the same background color you have to use custom CSS class for example “customColor” as a class name inside your menu and then use the below CSS code in global custom CSS under theme settings >> custom CSS:

Screenshot for clarification: https://jmp.sh/siVti2M

.customColor {
background: #cb442b;
}

3) To apply the same width you can add this “min-width: 270px;” inside the upper CSS code as given below:

.customColor {
background: #cb442b;
min-width: 270px;
}

Best Regards.

Hi,

Thanks for the support. Please see below and in the attached image some additional styling I haven’t been able to implement.

1. change the color of the text and icons from black to white
2. right align the downward caret creating space between the words “BROWSE DEPARTMENTS” to like it shows with the “Categories” element selected within Woodmart > Header Builder.

Regards.

Attachments:

You must be logged in to view attached files.

…is it also possible to show the ‘cursor/mouse pointer’ as a hand when interacting with “BROWSE DEPARTMENTS” CTA object?

Regards

Most Welcome,

You need to define a custom CSS class in that specific menu item from Appearance >> Menus, and then write CSS code to change the color of text and icons and alignment, letters gap etc.

If you do not know how to target the defined class with CSS code, then share the correct login details so I can provide you CSS accordingly because your provided login details are not working anymore.

Best Regards.

Hello,

Please find login info as requested.

Regards

Hello,

I add the “cursor: pointer;” in the prior CSS code which I have provided so now the pointer shown as hand on that item.

You can use the below CSS code in global custom CSS area under theme settings >> custom CSS to display white color for text and icons:

.customColor .nav-link-text, .customColor a i,  .whb-color-dark .navigation-style-default .customColor >a:after {
color: white; 
}

I have tested the above code it works just perfectly fine.

Best Regards.

Hello,

Thanks for your support. Can you confirm the status of the pending request sent on Jan 5.

——————————————————————————————
2. right align the downward caret creating space between the words “BROWSE DEPARTMENTS” to like it shows with the “Categories” element selected within Woodmart > Header Builder.
——————————————————————————————

Please reference attached image.

Regards.

Attachments:

You must be logged in to view attached files.

Most Welcome,

Yes, that pending issue is also resolved now. I used the below css code in global custom CSS area under theme settings >> custom CSS to increase the letter spacing and to right align the icon.

.whb-color-dark .navigation-style-default .customColor >a:after {
margin-left: auto;
}
.customColor .nav-link-text{
letter-spacing: 1px;
}

Replacing the downward arrow with upward when the menu is open is not possible with CSS. It requires customizations and this is beyond our limitations and support policy.

Best Regards.

Thanks for the quick turn-around. How do we change the direction of the arrow to point upward when the mega-menu is visible, and to point downward when the mega-menu is hidden.

Regards.

Most Welcome,

The arrow can be rotated with this CSS “transform: rotate(-180deg);” but it requires conditions in your case.

Also there is no direct option in theme settings to change the direction of the arrow to point upward when the mega-menu is visible, and to point downward when the mega-menu is closed.
It requires customization and this is beyond our limitations and support policy.

Best Regards.

Hello,

I’m not sure I understand your last comment as the video in the link below shows the arrow changing direction based on the visibility of the mega-menu.

Why can’t the same interaction be accomplished with the customized menu as it already works within your theme?

————————————————
https://1drv.ms/v/s!Avfrvtd5Pzz5hDYoMBjYWLh0oQUP
————————————————

Regards.

Hello,

I know the arrow rotation works with default categories menu because it is only designed for that categories menu.

But in your case we are using a custom menu which having a mega menu, Unfortunately that styling is not available for custom menus. That’s why we can’t apply that styling and it is also not achievable with custom CSS it requires complex additional codes which requires customization and that’s why this is beyond our limitations and support policy. Hope you understand the situation.

Best Regards.

[Author]

Posts