Goal: make the top edge of the header menu black without turning the bottom of the announcement bar black; the menu sticks on scroll, and its bottom is already black via custom CSS.
Proposed solutions:
Outcome: The original poster confirmed the fix worked (“Great, simple and easy!”). No further issues or questions were raised.
Notes: Images were shared to illustrate the before/after appearance but are not required to implement the change. The discussion appears resolved with the CSS border-top approach being the clear, reproducible solution.
Hello I’d like to make the top of the menu black.
It’s important not to make the bottom of the annoncement bar black instead, the difference shows when scrolling down since the menu follows. The bot of the menu is already black which I made through code in the custom css.
Hi @SamSukhoonNordl ,
You can follow these steps to make the effect
Open Online Store > Theme > Edit Code
Find and open the base.css (or theme.css, custom.css) file
Paste the code snippet below at the bottom of the file and hit save
.header {
border-top: 1px solid #000;
}
Here is the result
Hope this helps you solve the issue.
Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!
Hey @SamSukhoonNordl
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Great, simple and easy!
