How Can I Extend The Width Of My Dropdown Menu On The Refresh Theme?

[Corucent]

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 (Corucent.com Password: Zubair/Abdullah). Here's an image:

[EcomGraduates]

Hello there 

To extend the width of the dropdown menu on the Shopify Refresh theme, you can add custom CSS to your theme. You can access the theme's CSS file from the Shopify admin panel.

.site-header .site-nav .menu-item-has-children .sub-menu {
  min-width: 200px; /* Adjust this value to the desired width */
}

This CSS code will extend the width of the dropdown menu by setting a min-width value of 200px.

hope this helps!

[Corucent]

@EcomGraduates This is what happens when I paste it onto the bottom of the header.liquid. Am I doing something wrong? 

[DakotaChick]

@Corucent The code provided above needs to be placed inside the <style></style> tagging. You should be able to find the start of the <style> tag near the top of the header.liquid file.

Ex: 

<style>

.site-header .site-nav .menu-item-has-children .sub-menu {
  min-width: 200px; /* Adjust this value to the desired width */
}

</style>

[Corucent]

@DakotaChick I pasted exactly this at the bottom of my header.liquid and it didn't work. Do I need to erase a part or something?

[DakotaChick]

@Corucent It doesn't go at the bottom of the header.liquid. 

Option 1) Start at the top of the page in header.liquid, and scroll slowly down until you see the <style> tag opener, paste the initial code provided directly under that tag. Save, then check for changes.

 

Option 2) Start at the top of the page in header.liquid, and scroll slowly down until you see the <%style%> tag opener, paste the initial code provided directly under that tag. Save, then check for changes.

 

[Corucent]

@DakotaChick Didn't work...

[DakotaChick]

Then it is likely the code snippet itself that is the issue. I don't use the same theme as you, so it's more difficult to troubleshoot the code snippet. I am unsure exactly how your theme sets up and references the nav bar submenu items. The only other place you might be able to slap it in is whatever .css file name your full navigation bar set up is in. In the theme I use (Craft) this is located under the assets folder in the file "component-menu-drawer.css" which pertains to the styling of the nav menu and list items. 

[BG21]

Instead of setting it to a fixed width, I believe a better approach is to tell the lines not to break, then set the width to auto:

#HeaderMenu-MenuList-2,
#HeaderMenu-MenuList-3,
#HeaderMenu-MenuList-4 {
  white-space: nowrap;
  width: auto;
}

Use developer tools in your browser to Inspect and track down the particular menu

list names in YOUR menu; these id selectors are what I needed for my menu structure.

[SydneySmith]

I came across this randomly and your solution is the one that works! For the Dawn theme Paste this exact code at the bottom of your base.css file or custom CSS file if you have one. Thanks, BG21! Hopefully, OP Corucent can try this out and mark it as solved if it works.

[BG21]

Thanks for the heads up!  I'm glad that helped you.