I am using Enfold Child theme. I’ve just learned that some of my menu list items cut off on smaller screens (laptops). I’m not able to locate where to edit the function/setting? For reference, our website is https://asc41.com/. If you hover on Divisions in the main menu, it should look like the image below, and it does on a full screen; but, on a laptop some of the divisions listed at the bottom are cut off and scrolling down/paging down only activates the background of the page, not the menu. Any suggestions are welcome. Thank you.
Hey asc41,
Please try this in Quick CSS, in order to make the sub menu a bit wider:
#menu-item-15360 ul.sub-menu {
width: 275px;
}
Best regards,
Rikard
Rikard,
THANK YOU very much. That worked. If you don’t mind, please share with me what this number, 15360, is in reference to:
#menu-item-15360 ul.sub-menu {
width: 275px;
}
Obviously, I am new to CSS, so I would like to add this to my notes in case I need to do the same with another sub-menu.
Again, your help is very much appreciated.
Kelly Vance, Associate Director, American Society of Criminology
Hi Kelly Vance,
It’s the ID number that WordPress generated for that specific menu item.
In order to target the correct menu item, you can right-click over the Divisions menu item, click Inspect and you should be able to get this result: https://imgur.com/ue7rlsF
In the screenshot you’ll see that the ID is menu-item-15360.
Hope this helps.
Best regards,
Nikko
Yes, very helpful. Thank you Nikko.
Hi asc41,
You’re welcome, we’re just glad that we could help :)
Best regards,
Nikko