Are you tired of the default header menu color in your Shopify Brooklyn theme? Want to make a bold statement with your brand by changing the header menu color to something unique and eye-catching? Well, you’re in luck because we’ve got you covered!
In this blog post, we’ll guide you through the step-by-step process of changing the header menu color in your Shopify Brooklyn theme. With just a few tweaks here and there, you can give your online store an instant facelift that will surely impress your customers. So let’s get started!
Step One: Edit the Header Menu Color in the Theme Code
Changing the header menu color in Shopify Brooklyn theme can be done easily by following a few simple steps. First, we will discuss how to edit the header menu color in the theme code.
Step one: Edit the Header Menu Color in the Theme Code
To begin with, you need to log into your Shopify account and go to Online Store > Themes. Once there, click on Actions > Edit Code next to your active theme.
Now that you are inside of your theme’s code area, scroll down until you find “Assets” folder and click it. From there, select “theme.scss.liquid” file which contains all of your site’s stylesheets.
Next up is finding and editing this line of code:
.site-nav__link {color: #333;}
You can change “#333” (which is a shade of gray) to any other color code that you want for example if you want red then change it like this:
.site-nav__link {color: red;}
Save changes by clicking on Save button at top-right corner.
That’s it! You have successfully edited your header menu color through modifying Shopify Brooklyn Theme Code!
Step Two: Edit the Header Menu Color in the CSS file
Now that we have edited the header menu color in the theme code, it’s time to move on to step two: editing the header menu color in the CSS file. This method is a bit more advanced as it requires some knowledge of cascading style sheets (CSS).
Firstly, you’ll need to access your Shopify dashboard and navigate to Online Store > Themes > Actions > Edit Code. From here, click on “assets” and select “theme.scss.liquid”. This will open up your store’s stylesheet.
Next, you’ll need to search for “.site-nav__link” in the stylesheet. This class controls the main links in your header menu. To change their color, simply add this line of code:
color: #yourdesiredcolor;
Replace “yourdesiredcolor” with a valid hex code or RGB value.
If you want to change other elements of your header menu such as hover effects or active states, simply look for their respective classes in the CSS file and edit accordingly.
Once you’re happy with all changes made, remember to save and refresh your website so that they can take effect.
Editing colors through CSS may seem intimidating at first glance but once you get familiarized with how stylesheets work it becomes an easy task!
Conclusion
Changing the header menu color may seem like a small tweak, but it can make a significant impact on your Shopify Brooklyn theme. By following the steps outlined above, you should be able to change the header menu color in no time.
The first step is to edit the theme code and locate the section where you can modify the CSS file. Once you have found that section, you can proceed with editing your preferred colors for your website’s header menu.
However, if you’re not comfortable working with codes or prefer an easier way of changing your website’s appearance without doing any coding work at all, there are plenty of third-party apps available on Shopify that offer customization services to help modify store design elements easily and quickly.
Learning how to change the header menu color in Shopify Brooklyn Theme is just one example of how customizing a website’s design can improve customer experience and increase brand awareness significantly. Remember always to test different variations until arriving at what works best for your business needs while staying true to its branding guidelines.
