Venture Theme - Top bar and Link bar colour separate colours.

Ash_Robinson
New Member
2 0 0

Hi all! :). I hoping all you geniuses out there will be able to help me out with this please.

I am using the Venture theme and would like the top bar and the link bar to be seperate colours but from the basic menu it will only allow one colour.

Could anyone advise me on how I can do this please?

Kind regards,

Ash. 

0 Likes
Liam
Shopify Staff
Shopify Staff
636 16 222

Hi Ash!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to personalise your header to look exactly how you would like, so let's see how we could get control over the colours. As you have found, the basic theme editor will not let you set different colours so we going to need to dive in a little deeper and make an addition to the stylesheet of the theme. 

You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called shop.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your shop.scss.liquid file:

.nav-bar:after {
  background-color: red;
  
}

This will make your header look like this, but you can add any colour or hex value where red is above:

Hope this helps Ash, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Ash_Robinson
New Member
2 0 0

Amazing!! Thank you that looks so much better! :))).

I did have one other question acutally. If you click on the shop by vehicle tab when it drops down the list isnt scrollable so you can't see all of the options. Is there anything I can do with this at all?

Kind regards,

Ash 

0 Likes
Liam
Shopify Staff
Shopify Staff
636 16 222

Hi again Ash.

Thank you for getting back in touch. Liam here again. 

So you are seeing that there are some otions missing from here:

Which menu items are missing, that should be appearing?

I hope this helps.

Liam Griffin | Customer Success Guru

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
Farzam
New Member
4 0 0

Hi there,

I can' find shop.scss.liquid in the asset folder.

Is it saved with a new name in the latest version?

Thanks,

0 Likes
Liam
Shopify Staff
Shopify Staff
636 16 222

Hi there Farzam,

I've just checked on a recent version of Venture, and the stylesheet I see is named theme.scss.liquid. 

Hope this helps :)

 

 

Liam

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
Farzam
New Member
4 0 0

that's great. thank you very much.

also I would like to change the color of "heading text" of some of the section but not all of them. how can I do that?

 

0 Likes
Farzam
New Member
4 0 0

Hi Liam,

Could you please let me know if we can change the color of the small bar ? please see the attached image

0 Likes
Nick___Cindy_Bu
Tourist
3 0 2

This took me awhile to hunt down so I wanted to share it... 

To change the active menu bar color add this to the bottom of your theme.scss.theme file.

.site-nav--active &:after {
    background-color: $color-header-links;
  }

Note: I used $color-header-links which will match the text color, this can be substituted as seen above "red"

 

0 Likes
SanaAhmed
Excursionist
11 1 1

Hi Liam,

Is there a way to make the top head bar to white in color and navigation menu to remain same yellow color. 

SanaAhmed_0-1614899292299.png

Thanks,

Sana

0 Likes