Hi, I’m building a website with the Horizon theme. Right now the header submenu is opening to the far right. I’ve found many css suggestions through google and AI, but adding code to the base.css file makes no changes. If I add it to the _header-menu.liquid file, it DOES make changes, but I assume that file will get overwritten with updates? The selector I need to focus on seems to be .menu-list__submenu-inner, but again, adding that to base.css doesn’t do anything, though messing around with it in _header-menu.liquid file does make changes, though I still haven’t managed to get the child to open under the parent link. Any ideas? Thanks!!
I mean it opens to the far left, doesn’t look like I can edit my original post.
There is also a search function in this forum, where this topic has been discussed ad nauseum. Please refer to the many threads that already have solutions.
I’ve found many posts on this before posting, but none of the code has worked, or it what I’ve found hasn’t been relevant to the Horizon theme. I’m also using AI to help and no code changes have accomplished what I want yet. But I will search again.
Thanks!!
To anyone who might have this issue, AI helped me step by step, once you know the file you need to fix, you just paste the code and AI tells you what to fix.
My question for humans though, what will happen when this theme updates in the future, will it overwrite my custom code? I used to make my site on Zencart, and you had to have a copy of the file where you made edits, while the main file could be overwritten when there were updates. I hope Shopify isn’t as archaic (though I loved Zencart at the time, and their support forum was super helpful).
Yes it will overwrite when updated. That’s what updating does.
There’s a better place to put custom code, the theme editor has custom css and custom liquid boxes to put custom code so it won’t be overwritten.
It will work with liquid file but not bass.css, probably because it’s either not css or the css code is wrapped in a style tag.
Your ai answers probably will work with most basic things, but it will only go so far. Knowing the selector is half the battle, and you don’t need ai to tell you what it is. Simply right click on the web page, click inspect, click the top left icon in the control panel, select the block on the page, and the panel will highlight it, telling you the class name.
Would I put the custom CSS here? And so far AI has solved my issue, it just took awhile to get there. I just need to know where to put the code it’s given me so I don’t lose it.
Hi, @MidnightRebellion
Can you share the store URL and take a screenshot to describe your requirements? So that I can assist you.
I just scrolled down and found the custom css box, would that be a better place for css for the header?
So I just found out you can’t put a lot of css code in there, it limits you to 500 characters. I think I just need to explore menu plugins. Does anyone know which plug in will just allow you to adjust where the child links fall under the parent links?
Just chalk it up to having to deal with the headache of free themes.
I mean apps. I downloaded the Buddha app and I’ll see how it works 