Dropdown menu different size

[samueltheriault]

Hi,

Is it possible to make every dropdown different size to fit the content? Actually I specify a width in the Dropdown item but I can’t seem to make it auto.

Thank you

website: http://new.studio303.ca

[nico]

Hi @samueltheriault,

Thanks for writing in.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you so much.

[samueltheriault]

Here 2 pictures of the submenu on the website. I would like to lose the space on the first one (orange) so I don’t have a big empty space. But I also have some submenu with longer text that I don’t want on 2 lines.

Thank you

[friech]

Hi There,

Thank you for the clarification, please add this on your menu’s Element CSS area

$el .x-dropdown {width: auto;}
$el .sub-menu .x-anchor .x-anchor-text-primary {white-space: nowrap;}

If this did not work, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

[samueltheriault]

Exactly what I need.

Thank you

[nabeel]

Hi again,

We’re glad it worked. In addition to that I’d suggest you to check out the following article https://theme.co/apex/forum/t/features-element-css/20500 and If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!