Button Color Blocking Products

Solved
New Member
2 0 1

Hey there,

 

Having a problem I was hoping someone could help me with. This all started as when designing my site on the mobile version the menu dropdown had a white background color with white text. I've found in the global settings in the theme.scss.liquid file the button colour, which I have changed the hex to match my sites color scheme.

 

/*================ GLOBAL ================*/
/*============================================================================
  #Normalize
  Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

body,
input,
textarea,
button,
select {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  background-color: #0092CF;
}

 

This solved the issue, but now all my products on the homepage are covered by the same color block (probably because the buttons are not transparent anymore). 

 

Any help with this? Either I need to make the menu on mobile a solid color (which I cannot figure out) or have the products react to a different button color, which I cannot figure out.

 

Please help!

 

Screenshot 2019-12-04 at 12.02.05.pngitems in my shopScreenshot 2019-12-04 at 12.02.16.pngmy mobile menu bar

0 Likes

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

Success.

Shopify Expert
665 170 199

Hi, @nocontextshop ,

This is Evita from On The Map.

 

I can see that you added color to ALL <a> tag link elements this overrides all of the link colors. Can you share your store URL or try replacing with this code:

 

nav a {
  background-color: #0092CF;
}

Be sure to remove the <a> tag CSS style

 

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
2 0 1

Who knew it would be that easy! Thank you so much! All sorted. 

1 Like