Savor Theme - Dropdown menu width change to size of text

Technical Q&A
, , ,
1

Hi all! New to Shopify and building everything out without knowing much about CSS.

Background: I’m using the Savor theme for an ecommerce platform to sell pirate treasure hunts for families. I want the main menu at the top of the Home page to have dropdowns that are just wide enough for the text of the different pages they are to go to.

Issue: The dropdowns are the width of the entire page, putting the text links all the way to the left. This does not look good and it causes the user to have to move the cursor all the way over to the links to click them.

Snip of the problem: https://drive.google.com/file/d/1Ws79fIleH2vGFyMked7i395j2ebYSFoB/view?usp=sharing

Site is hocopirates.com, no password

Ask: Help me make the dropdowns for the main menu items located below the parent menu item. Also, have the width of the submenu be just wide enough for the text of the link.

Tried So Far: I’ve looked for a configuration in the Savor Theme settings for submenu width or location - I have not found any. The AI is also unable to locate any such configuration item. I have looked at several other forum posts and tried many CSS entries added to the base.css file - none have worked.

2

Try this solution – Horizon theme: drop-down menu alignment - #13 by tim_1

Savor has the same theme code as Horizon, so this should work for you too

3

tim_1, this got closer! The submenu names now appear below the Menu item, but the background still stretches the entire screen. How do I get the background of the submenu to be just wide enough for the names of the different pages?
Recording of what I’m seeing: https://drive.google.com/file/d/1xim7LU0lnCEVJZ79EbY0dmbWnQ4LIqlh/view?usp=sharing

4

@tim_tairli - flagging for the above comment.

5

Need a preview password.
The code worked on fresh theme, probably you have other CSS rules more powerful than these – need to see the site.

6

@tim_tairli Password is “booty”

7

Oh, I see. Shopify has changed the structure of the header menu elements.
I’d need to see how to update my code for the newer theme versions.

I’ve shared updated code in that thread – Horizon theme: drop-down menu alignment - #19 by tim_1

Again, you can use only <style> ... </style> portion of it.