Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How familiar are you with CSS?
Familiar enough. I looked under editor, but was exactly sure where it was located.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Does that theme come with a section in the dashboard named, “Custom CSS”, “Custom Styles” or “Jetpack”?
There’s 3 places to adjust the width. In your theme files, go to the “css” folder and open the menu.css file.
Find line 49 that starts with this: #site-navigation ul ul ul
Change the 200px to what you want, eg: 300px
Find line 60 that starts with this: #site-navigaton ul ul li
Change the 200px to same width you did for the first width above.
Find line 84 that starts with this: #site-navigation ul li:hover > ul
Change the 200px to the same…as above.
RECOMMENDATION: I would recommend creating a custom.css file and adding it to your css folder in the theme, then link to it from the header.php file in the <head> area. The reason is so that if you make any css changes in this custom.css file, any theme updates won’t overwrite changes, but would if you did them directly in the theme original stylesheets. However, as I always say to everyone, always make a backup before you make any kind of changes to anything…always good to play safe than sorry 🙂
With a custom.css file, you would simply take those styles and paste them into the custom.css (only the parts you want to modify)
Seems pretty straight forward. I seems to just be CSS editing.
Just css editing only 🙂
My next theme I will be making is going to be a framework based theme where child themes will be used, therefore editing will be easier. But hopefully this one will work out for you with the widening of the submenus.
Worked like a charm. Thanks.
