Home › Forums › WoodMart support forum › Mega menu customization

Mega menu customization

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 17, 2021 at 4:03 pm #283903

    Razanfati
    Participant

    Hello,
    I’m trying to remove the white margin around the mega menu (created by html blocks) as per attached image, but nothing works.
    also I’m facing a problem in changing the menu background color on hover, I tried using custom css but it does not affect the mega menu
    where can I change the font and the border of the mega menu

    Thanks

    Attachments:
    You must be logged in to view attached files.
    April 17, 2021 at 8:55 pm #283948

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access to the private area.

    Please give me the screen of what you want to change I will give the correct CSS code.

    Best Regards

    April 18, 2021 at 10:04 am #284033

    Razanfati
    Participant

    Thanks,
    the following are the desired changes as per attached image:
    -the text in the main menu (on hover) to be with #dee8ef background color, border radius 20px, and no change in font color
    -the mega menu with no white padding, with border radius 50px from the bottom
    -maga menu text to be underlined, with #dee8ef background color on hover

    also the mega menu appears only when we are logged in, we want it to be always visible

    Attachments:
    You must be logged in to view attached files.
    April 19, 2021 at 11:20 am #284290

    Elise Noromit
    Member

    Hello,

    Your site is not reachable now. Please let me know when it works, I will check and give custom CSS.

    Best Regards

    April 19, 2021 at 11:38 am #284298

    Razanfati
    Participant

    the site

    April 20, 2021 at 11:58 am #284642

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .wd-dropdown-menu.wd-design-sized{
padding:0;
}

    Best Regards

    April 25, 2021 at 8:53 am #286364

    Razanfati
    Participant

    hello,
    thank you, the code resolved the margin issue.
    but there is another problem in the mega menu, some of the mega menu items have subcategories, that need to appear in the middle column(as per attached image); I’m not sure what is the best way to do this, (theoretically I think the submenu could be done as another mega menu widget that is only displayed when you hover on the category item, but I don’t know how to translate that into code)

    Attachments:
    You must be logged in to view attached files.
    April 25, 2021 at 7:08 pm #286472

    Elise Noromit
    Member

    Hello,

    You can realize that by means of the Browse Categories mega menu: https://gyazo.com/43ba1b9bed0d06a757217d3b8a9478df you can find instruction on how to do that here: https://xtemos.com/docs/woodmart/product-category-menu/

    Best Regards

    April 26, 2021 at 9:19 am #286674

    Razanfati
    Participant

    Hi,

    Thank you for your reply.
    We ended up using an HTML block for each children category in the menu. the problem now is that on smaller desktop screens the children’s categories float to the left and are blocking their parent categories. we tried to add custom CSS to make them appear on the right side of their parent categories but it did not work. please see the attached photo.

    Thanks

    Attachments:
    You must be logged in to view attached files.
    April 26, 2021 at 6:29 pm #286881

    Elise Noromit
    Member

    Hello,

    You will have to hide the blocks in mobile and create another one under or elsewhere, this is the only way out.

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)