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

Corucent
Tourist
12 0 0

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:

 

Corucent_0-1675356469976.png

 

Replies 8 (8)

EcomGraduates
Shopify Partner
588 48 76

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!

 

 

banned
Corucent
Tourist
12 0 0

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

Corucent_0-1675507036096.png

 

DakotaChick
Excursionist
14 2 2

@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
Tourist
12 0 0

@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
Excursionist
14 2 2

@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.

Screenshot_2.png

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.

Screenshot_1.png

Corucent
Tourist
12 0 0

@DakotaChick Didn't work...

DakotaChick
Excursionist
14 2 2

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
Visitor
2 0 0

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 Image1.png

 

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