Change menu text color/hover color in Venture theme?

Highlighted
Tourist
14 0 0

I need to change the text color of the menu headings (not the subheadings in the dropdown), and the hover color for this. I haven't been able to find out how to do this anywhere in this theme!

0 Likes
Highlighted
Shopify Partner
1839 176 680

Hi,

 

That would be a great addition. I can see how not being able to change colours for specific elements of the theme is limiting you so let's get this sorted.

 

Go to Online Store > Themes and then Actions > Duplicate to create a backup of your current theme just in case something goes wrong and you need to revert. Better safe than sorry. Great, now do Actions > Edit code and in the left pane of the code editor that opens, you will find a folder called Assets and inside a file named theme.scss.liquid. Open that one and find a bit of code within that is like

 

.site-nav__link {
  @include nav-text-style();
  position: relative;
  color: $color-header-links;
  color: $color-header-links-rgba;
  padding: $gutter-site;
  z-index: $z-index-nav-links;

  .icon {
    position: relative;
    top: -1.5px;
    width: 9px;
    height: 9px;
    fill: currentColor;
  }

  &:hover,
  &:focus,
  .site-nav--active & {
    color: $color-header-links;
  }

Now we need to change a few specific lines

 

.site-nav__link {
  @include nav-text-style();
  position: relative;
  color: red; // changed this one
  color: rgba(242, 38, 19, 0.7); // changed this one
  padding: $gutter-site;
  z-index: $z-index-nav-links;

  .icon {
    position: relative;
    top: -1.5px;
    width: 9px;
    height: 9px;
    fill: currentColor;
  }

  &:hover,
  &:focus,
  .site-nav--active & {
    color: red; // changed this one
  }

Note the lines I changed. I used red as the colour just to make it obvious, but you can choose any colour you want from the named CSS colours or a hex value. There's only one you need to watch for, that's the RGBA colour value as that has an alpha opacity (which is why the inactive menu items appear faded).

 

Hit save and enjoy your changes.

 

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Tourist
14 0 0

Thank you so much! I needed to change this a little bit, but it worked! Would you be able to help with changing the color of the sale price for discounted products! If not, I appreciate all your help!

0 Likes
Highlighted
Shopify Partner
1839 176 680

Hey, glad it worked!

 

Regarding sale price. If you mean changing this

5CiPVih

to be like 

tkxIoXW

i.e. blue or whatever.

 

If so, you need to add some CSS again and edit a 1 line is Liquid.

 

Open theme.scss.liquid and search for

 

.product-single__price--compare {
  color: lighten($color-body-text, 5%);
}

Below that snippet, add this new class

 

.product-single__price--sale {
  color: $color-btn-primary;
}

Of course, if you don't want that to be the primary button colour, you can change it to whatever you prefer. I like keeping theme colour schemes uniform and configurable via settings so I'll leave it as such.

 

Now you need to open Sections / product-template.liquid and search for this line

 

<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">

Inside the class attribute we will add a condition checking whether the item is on sale i.e. current price is lower than compare at price. If it is, add the CSS class we wrote in the previous step. In the end the line above should be like so

 

<span id="ProductPrice-{{ section.id }}" class="product-single__price{% unless product.compare_at_price < product.price %} product-single__price--sale{% endunless %}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">

Save and voila!

 

Best wishes!

 

p.s. if this wasn't what you were after excuse the long read and I don't do refunds on time spent reading 😆

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Tourist
14 0 0

I appreciate all your help, but unfortunately, this didn't work! I input it all correctly so I'm not sure where it went wrong.

0 Likes
Highlighted
Shopify Partner
1839 176 680

Okay, I actually made the change and see it working so let's troubleshoot

 

  1. Are you using Price and Compare at Price for your "on sale" products?
  2. If you are, please post your store URL or PM me with the address so I can take a look

 

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
14 0 0

Yes we are. This is the link to the new theme we're about to launch: https://g47yq0p5jx5j4bfp-13453855.shopifypreview.com

0 Likes
Highlighted
Shopify Partner
1839 176 680

Urmmm...

 

8SzIFNV

I see the sale price is red i.e. it works.

 

Or did you mean to change the colour of the sale price somewhere else? In collections template maybe?

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
14 0 0

We're trying to get it changed on the main pages, not just the product page.

0 Likes
Highlighted
Shopify Partner
1839 176 680

The joy of requirements gathering using delayed linear text communication... mmmh :-D

 

Okay, so then open Snippets / product-card.liquid and find this

 

 

          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

 

Change the line before the last {% endif %} to be

 

 

<span class="product-single__price--sale">{{ product.price | money_without_trailing_zeros }}</span>

 

Now open Locales / en.default.json and look for "on_sale_from_html". Change the entire line to be

 

"on_sale_from_html": "On sale from <span class=\"product-single__price--sale\">{{ price }}</span>",

That should do it. Let me know how it goes.

 

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes