Make Option Drop Downs More Visible Venture Theme

Solved
New Member
8 0 0

Hello!

I'm using Venture Theme, and have added options with drop-down menus. I would like to change the appearance of the drop down menus on the product page so that they appear more visible and user friendly. Currently everything has small grey text and white background. My concern is that customers won't see all the options clearly. 

 

 

Can someone tell me where in the code I can change:

1: Background color of drop down menus -OR- add an outline to drop down menu

2: Font size/color of the Option titles and drop downs

3: Any other suggestion you might offer as a solution

 

Screen shot attached. Thanks so much!

 

Screenshot (1).png

0 Likes

Hello @EWilson,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

1) Background color of drop down menus

add below css

.meganav__nav {
	background-color: #f8c200;
}

2)add an outline to drop down menu

.meganav__nav {
	border: 1px solid #000;
}

3: Font size/color of the Option titles and drop downs

.meganav__link.meganav__link--second-level {
	color: #000;
	font-size: 18px;
}

Note:Please change color and font-size as per your requirement

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
New Member
8 0 0

Thanks so much for your reply!

This solution changed the drop downs in the main menu bar, but not the "variants" drop downs (see photo attached)

My goal is to highlight the options for the individual products, such as color, style, and document capacity.

 

Screenshot (8).png

0 Likes

Success.

Hello @EWilson,

Please add below css

.single-option-selector {
	background-color: #fff;
	border: 1px solid #f8c200;
	font-size: 18px;
	color: #f8c200;
}
option {
	color: #f8c200;
}

Note:change color as per your requirement

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
1 Like
New Member
8 0 0

Success. Thank you so much!

0 Likes