Hi, I have a issue with my header menu in desktop only, there are 2 search functions and if I toggle the search option to OFF, both search functions disappears. How can I only retain the search function on the right side. Secondly, after adding an item to cart, the qty(green icon) and the cart icon is misaligned with the rest of the icons.
It appears fine in mobile.
This is my site https://liquorassets.net/ .
Please help, thank you.
You have a serious problem with CSS edits.
Some liquid files have code like this:
{% stylesheet %}
... CSS code ...
{% endstylesheet %}
Theme engine extracts CSS codes from these parts of code and combine together in a big stylesheet styles.css
When you make a mistake in one of these files it may affect multiple other files.
In your case, in snippets/collection-card.liquid you have media rule which does not have closing curly brace (should be where the arrow is, I believe)
Therefore this media query applies to the rest of this styles.css file – about 7 thousand lines.
This leads to rules like this – with double media queary nesting.
In this case the rule would still work, because both media queries match.
However, some rules will become like below and would never match.
This exact rule should should hide one of the search buttons on desktop and another on mobile.
@media screen and (max-width: 749px) {
@media screen and (min-width: 750px) {
[data-menu-style='drawer'] .search-action--hidden-on-drawer {
display: none;
}
[data-menu-style='menu'] .search-action--hidden-on-menu {
display: none;
}
}
}
And on top of this, you also have a rule like this, with !important which overrides the rules above and forces both search buttons to show on desktop.
Sorry, but the person who’ve performed these CSS edits in your theme did not really pay attention to the theme structure.
Someone needs to audit all these changes…
So, to fix your header, I’d start by adding the missing curly brace in snippets/collection-card.liquid and then removing the code I’ve mentioned from the assets/base.css
Then it will work like this:
just paste this css code in theme.liquid or base.liquid
your porblem will be resolved
@media screen and (min-width: 990px) {
.header__search--left,
.header .search-modal:first-of-type {
display: none !important;
}
.header__icons {
align-items: center;
}
.cart-count-bubble {
position: absolute;
top: -6px;
right: -6px;
}
}
You can try to add this code to Custom CSS in Theme settings then check
.action__cart { position: relative; }
.header__column--left search-button { display: none !important; }
.cart-bubble { position: absolute !important; top: 0; right: 0; }
Dan from Ryviu: Reviews & Loyatly App
Hi Tim, thank you so much for the guidance. I was the one that did the scripting/coding and I dont have any prior knowledge or experience. I mainly relied on AI to help me with the scripting hence the messy and patchy code, without realising where the errors are.
I’ve added } and also removed the whole section as shown below since its no longer required after } have been added.
Thank you again :)
Learning is good.
I was worried that you’ve hired an unworthy dev though.
Some points I believe are important:
When AI gives you code, make sure you understand what it does, rather then accepting it blindly.
Sometimes it’s a good idea to ask (different?) AI to explain the code.
Keep in mind that some CSS selectors (for example, class names) are more widely used than other and modifying their behaviour can produce unwanted side-effects.
Try avoiding !important – there are several reasons why this complicates development and should be avoided.
Unfortunately, Horizon is significantly more complex than, say Dawn in terms of architecture and CSS used, so not the best starter theme, but – good luck anyway.
And generally, I prefer to either use “Custom CSS” settings or “Custom Liquid” section, or create a separate stylesheet, like custom.css to put my CSS codes in to avoid future problems with, say theme version updates, keep better track of changes and localize my errors somewhat.
Hope my posts gave you some helpful hints.
Thank you, its a steep learning curve for sure!
