Edit width of submenu drop down

leadoptimize · September 2015

I have done quite a bit of css customization to the header, but I have one edit that I can't find the selector for. I need to make the drop down menu for standard menu (not mega-menu) wide. Currently, if you click on Cause Mapping (the first main menu item) you'll get a drop down. But the items in that drop down menu each take up 2 lines of text. I want to widen the dropdown menu enough for all submenu items to only take up on line.

What css do I need accomplish this?

Or is there a theme option somewhere that I missed?

Thanks,

Rob

Albert · September 2015

Hi Rob,

to make submenu items wider, you can use below css:

#Top_bar .menu li ul li { width: 250px !important; }

leadoptimize · September 2015

Thanks so much. That was it. I've been working with this header to make it much smaller (not as tall), including getting submenu items to to wrap text into 2 lines....so this css helped a lot!

Albert · September 2015

You're welcome

popsynic · November 2015

Just to say thanks muffingroup - this solved the same issue for me.

Just to note though, the css code for me required adding in px - as in

#Top_bar .menu li ul li { width: 250px !important; }

Albert · November 2015

@popsynic Sorry for that. We just noticed that we missed px

michaelk026 · May 2016

Thank you, this helps me fixing the wide of the submenu.

I set css editor on : #Top_bar .menu li ul li { width: 260px !important; }
But now my second and thirth submenu are overlapping each other.

The first submenu drops down "that's fine", the second and third submenu appears on the right that's fine too, but it appears on the "standard width" around 190px place, The second submenu box has to move 70px to the right.

The only thing what i have moving around to the right, is the text inside the submenu not the whole submenu box.

Thanks,

Michael

Albert · May 2016

@michaelk026 Please send us link to your page then.

michaelk026 · May 2016

http://wp.jacosta.nl/

Like this top menu: Onze werkzaamheden > Schoorsteen werkzaamheden > Schoorsteenkap > Windwijzers sierkap

Betheme v13.1

Wordpress v4.5.2

Testing with Chrome and Edge

Thanks,

Michael

Albert · May 2016

Ok, thanks. So to move those sub-sub items to the right side, you need to use the following css:

#Top_bar .menu li ul li ul { left: 260px !important; }

michaelk026 · May 2016

I have tried that before, without the ul at the end.
It works now thank you!

Albert · May 2016

You're welcome!

RolandAndres · May 2016

Hello muffingroup.

I got the same Problem but i dont know where i should fill in (#Top_bar .menu li ul li { width: 250px !important; })

my webiste is www.rolandandres.at

maybe you can send me an advice thx in advance!

Albert · May 2016

@RolandAndres Each css supposed to be pasted under Theme options > Custom CSS & JS > Custom CSS section.

RolandAndres · May 2016

thx

Albert · May 2016

You're welcome!

jpme226 · November 2016

Seems like it would be easier to have things like this as adjustable in the theme settings?

Albert · November 2016

@jpme226 Yes, it would be definitely if you will only have better hosting services. Please understand that we can not add any feature you just want because lot’s of users uses poor hosting services and more options/features means higher server requirements. We can add thousands options more and it's not a problem for us. The problem would be for your servers only.

SNA68 · March 2018

Hi, I had the same problem as michaelk026, which I solved with your CSS, thanks. But in my menu there is both a dropdown item and a mega menu item. But this CSS also affects the mega menu (see http://www.studionicolussi.cloud). How can I solve?

Bryan · March 2018

But what do you want to solve exactly?

SNA68 · March 2018

With your CSS code I solved the overlap of the second and third submenus for the "PRODOTTI" item, but also in the "LINEE" item (done with megamenu and not dropdown menu) the third submenu is moved to the right (see the link above). But here I don't need it... Thanks!

Bryan · March 2018

This is because of some custom css you pasted into theme options>custom css&js>css
Please remove that JS function from the css, why did you paste it there?
thanks

Kaka117 · July 2018

Hi,

I've placed this into my CSS section within the theme options, but it doesn't change my sub menu at all? I've tried 3 different browsers but it's just not working for me. Is there anything I am missing. Cheers.

#Top_bar .menu li ul li { width: 250px !important; }

Pablo · July 2018

Kaka117

Please send me a link to your website.

Thanks.

Edit width of submenu drop down

Comments