On my site, I have a dropdown menu, with one item in it. However, this item’s name is very long, and it shows on two lines. How can I make the width of the dropdown menu longer, so that the name shows on only one line? I’m using the Refresh theme. Here’s an image:
Topic summary
Goal: Make a long dropdown menu item in the Shopify Refresh theme display on a single line by increasing the submenu width/spacing.
Key steps suggested:
- Edit theme code: Online Store → Theme → Edit code → base.css.
- Target CSS selector: .header__submenu .header__menu-item.
- Proposed CSS: justify-content: space-between; padding: 0.8rem 2rem; to widen spacing in the submenu.
Progress and issues:
- Helpers requested the store URL and password; the requester shared them (credentials not repeated here).
- The requester couldn’t locate the CSS class with search and asked for the exact line; reported the suggestion didn’t work.
- Another user confirmed a partial fix using padding: 0.8rem 0.24rem; it forces one line but removes left whitespace. They also want the dropdown aligned more centrally under the parent “Shop” menu instead of right-aligned.
Open questions:
- Precise location/selectors for modifying submenu width/alignment in Refresh if .header__submenu .header__menu-item isn’t found or overridden.
- How to restore left padding while keeping one-line text and how to center the dropdown under the parent item.
Notes: Screenshots illustrate the overflow and spacing; the CSS snippet is central to the discussion. The thread remains unresolved.
Hello @Corucent
please share your store URL so i can provide you some solution for this.
1 Like
hi @Corucent
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
1 Like
corucent.com Password (Zubair/Abdullah)
It’s corucent.com and the password is Zubair/Abdullah
Hi @Corucent
I’m Kate from PageFly - Landing Page Builder, I’d like to suggest this idea:
Step 1: You go Online Store → theme → action → edit code
Step 2: You find the file base.css.
Step 3: You find class .header__submenu .header__menu-item
Step 4: You edit CSS it:
<>
.header__submenu .header__menu-item {
justify-content: space-between;
padding: 0.8rem 2rem;
}
<>
1 Like
How do I find the class? Cntrl+F isn’t working. What line is it on?
@PageFly-Kate What line of code is this on? It didn’t work for me.
Hi So I was having the same issue and this is the code that I had to use to get it on one line, but the problem is there is no white space on the left hand side now and I dont know how to fix that - Please can you advise.
So Please I need more space on the right hand side and I am also just wondering if there is a way that when you click on the drop down menu, it should be more central under shop, as opposed to all on the right hand side?
Thank you very much
.header__submenu .header__menu-item {
justify-content: space-between;
padding: 0.8rem 0.24rem;
