Managing Mega-Menu

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,

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,

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.

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,

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.

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.

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 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.