Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi,
I want to put a black background strip behind my menus so it pops out more. Currently, it's just in white with black text. I want it to look exactly like this:
Here's my website: www.fabricapparel.com
Hope you could help me. Thank you!
Solved! Go to the solution
This is an accepted solution.
@kay_png after ".header{...}" above, you can add this code for backing black button:
.banner__buttons__fixed .button.button--primary {
background-color: black!important;
}
Hope this can fix your problem
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @kay_png,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.header__menu-item span {
color: #ffff !important;
}
</style>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi sorry, I meant it should include a black strip and white text. Like this:
Hi @kay_png, When i check your site. I look good
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi, I was able to fix the problem but I was wondering how I can put the black rectangle buttons on the "wholesale" and "by the yard" back. It was removed when I entered this code to fix the background strip on the menu:
.header__inline-menu{background-color: black; width: 100%; text-align: center;}
@media screen and (min-width: 990px){
.header {padding: 0 !important;}
.header{max-width: 100%;}
}
This is an accepted solution.
@kay_png after ".header{...}" above, you can add this code for backing black button:
.banner__buttons__fixed .button.button--primary {
background-color: black!important;
}
Hope this can fix your problem
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Thank you! This helped 🙂
Your're welcome. Have a good day!
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now