I’ll start off easy.
Through the ways of Google searching and YouTube I’ve recently taught myself how to wrap a dropdown menu item onto a single line.
Dropdown menu item to display on a single line
My chosen CMS and Theme
I use WordPress with the Divi theme, and have been since early 2017 when I worked as an in-house web and graphic designer for a small niche tech company, and I’ve been using WordPress and Divi ever since.
I found a blog and video from Pee-aye Creative, here’s what I learnt.
Follow this link to the blog: How To Set An Auto-Adjusting Divi Menu Dropdown Width
When using Divi it’s advised to also have a child theme installed. I’ll explain what a child theme is in a later blog. Or view Pee-aye Creative’s blog about it here.
If you haven’t already, have a play with the slider image above. This shows the before and after of my dropdown menu.
To get the dropdown items into a single line, you just add the following CSS code snippet below into your website.
Where to paste the CSS Code:
1. Child Theme – Paste into the style.css file
2. Divi Theme customiser – Navigate to Divi > Theme Options > Custom CSS and paste the CSS code into the code box.
/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto !important;
}
}