The drop down menu width is not automatic, I have some words that not fit

Hello,

Some words in my drop down menu are cut because of the width of the column. This display is not good because only one letter jumps in other line. Ex:

How to get all the word in a single line?

How can I change the display of the dropdown to get something like this :

Thank you in advance

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :-).

I saw the screenshots you attached.

1) Such issues occur when you use too large a name for the items. Please provide with the URL of the website to check it myself and help you out accordingly.

2) You need to add an HTML Block as dropdown for the specific menu item and then populate the HTML Block according to your needs.

Screenshot for Clarification: https://ibb.co/7JTbV6d

Best Regards.

hello again,

Thank you for your answer

1) I need to use this word because it is the most specific for what I try to use, maybe I can change the size of the letter?
here, this is the url : https://www.ferrimaxi.com/

2) I would love to configurate the dropdown as the exemple I showed on my first message. Do you think that is possible?

I realize that there is a problem when I want to developpe the drop down, some options are not display.

Here the explanation of the issue in a picture :

Here what I would like to have :

Hello,

I saw the screenshots you attached and visited the URL you provided.

1) The main issue is the titles that you are using for the menu items that are too big that’s why they are looking like this. Please add the following Custom CSS in the Custom CSS for desktop area under Theme Settings >> Custom CSS.

.sub-menu-dropdown.color-scheme-dark {
width: 285px;
}

You can set the width according to your needs.

2) To achieve the that you need to create an HTML Block as set it as the HTML Block as drop down for that particular menu item from Appearance >> Menus. As I mentioned in my previous reply.

Screenshot for Clarification: https://ibb.co/7JTbV6d

You can read our detailed documentation in the following link:
https://xtemos.com/docs/woodmart/html-blocks-2/#mega_menu

Best Regards.

Hello,

Thanks for your answers.

1) That Custom CSS worked perfectly for what I needed. (here the image : )

2)I applied mega menu on my dropdown menu but the display is not as I want. When I applied mega menu I have this : (levels are in color red=1st leverl, green=send level, bleu= 3th level
This is not what I want because of multiple reasons :
– The levels are distributed horizontally, this put the first level of menu on the top and I want it to be vertical and the possibility to the user to dropdown the level he is searching for. Also, not all the 1st level menu are not displayed because the space is not enough.
– As you can see the levels have not sense anymore, only the 1st level is on top and bold but the rest of levels are below with no differentiation

To be more precise I would like to have something like this : https://streamable.com/r4muq3
– here the first level is display verticaly and then dropdown the 2 level verticaly again and the 3th level too and if a second column is needed this adapt automaticaly.

Regards
Chris

Hello,

We are Glad that one of your issues is being resolved by our solution.

And for the mega menu on hover element you cannot have the same as you provided in the link.
You can have them using HTML Block. As you see you are using too much elements inside the HTML
Block and its worked absolutely fine as it should.

You can try decreasing the number of elements inside the HTML Block.

If you want to ask anything else then please provide some relevant screenshot of the specific area to check it myself and help you out accordingly.

Best Regards.

[Author]

Posts